How do we fix the length of the footer as the frame moves from left to right in size?

A URL link to the sites is available at http://cfored.coffeecup.com/index.html

Screen Shot images:

https://cloud.githubusercontent.com/ass … bb46c3.PNG

https://cloud.githubusercontent.com/ass … 9685c6.PNG

Did you mean the height because from here in sunny Bali the length stays the same.

If your footer thingy is a column it could be the min height setting decreases in the design pane as you move up to the left

Check your min and max height settings at every break point. If they are set the same your footer should be the same at every break point.

The only time I make a change is when the size gets down to phones and have a lot of footer info. A little more height there lets the footer look a lot better and if you have say terms and privacy links it makes it easier to tap on those links.

Got it (Max-width & Max-height both set to none) -thanks

i had a quick look at your site last night before the current upload that you have. About the same time my printer went nuts and I had the spend a night to fix it because I had extremely time sensitive things to print. Perhaps later I can create something for you to work from.

I believe your issues stem from two things: 1: You actually do not have a footer. 2: It appears are trying to copy a static non-responsive site, and are using rows to place paragraphs when you should be using other methods.

It appears that you have a footer, but you have no code for it. That black bar is actually a part of the background image. The background image was set in a row with a minimum height, and when put into the maximum width you gave it, that black bar gets cut off (the background image is larger than the size of the row you gave it) you gave it. You gave some parameters for the background image to try to fit into its elements - so as the viewport gets smaller, the black bar is able to be viewed.

There are some rows, one even given a -425 px margin to place text on top of the original row containing the background image. (I can't double check it because the current upload has changed), this will just cause problems down the road when you should try easier ways, because you may end up having to manually adjust pixel placements instead of just letting elements flow. You should try to position the text within the row, using columns with cleared floats, or a subgrid of columns, or just paragraph elements in the row. Simple way for your design, it just create some rows of two columns, and the left column has your text for each for for the three paragraphs.

Then, for your footer, create a row, and give it a background color of black, then place your footer elements inside that. Maybe I can make something later for you. It may even be easier to give your GRID the background image, then just work with your rows.

This is just a mock up idea I have.

You will see I did a few things that should stand out to help. First, I cropped the background image. I got rid of the black bar, and set the row background image so its static. Its a big image, and to keep the CED logo visible, one can not reduce the size of the image a whole lot. I would experiment with the original image, without the logo, the put the logo on as an image so it can be easily manipulated with the text. I gave the row a sufficient height. The text is just two paragraphs with the first paragraph margin set to be under the logo. Then added a row, gave it a height, and a background of black. This is now your footer. I put some stuff in to just play with it. No the ruler bar display property is set to none in the desktop view.

At the breakpoint, I changed the size of the row and readjusted the text. and in the footer, you see I reflowed the columns by changing their spans. I won;t say this is the best way, but I think its the direction you should go, especially if you are looking for that footer and had issues earlier.

This is a link to the file I made, it should give you some ideas. You can even set one container, and use a flex positioning for the header text. The background image, could just be an actual image, with a low z-index so you can resize it more easily and move it around and change the focus, while another image has the CED logo.

https://www.dropbox.com/s/kzy5omzr7tla1tq/CED.rsd?dl=0

Hi Bill,

At the Break Point in Design Settings under Dimensions, I made these adjustments:
1. Padding 30 to 0
2. Margin 160 to 180
3. Increased Footer Margin From 600 to 150

Question:
How do I remove those adjustments to the breakpoints for a smooth breakpoint transition between rows?


Source Links:
Download the RSD file at http://tinyurl.com/CED-link;

View web page link at http://cfored.coffeecup.com/index.html


Thanks,

Hal

Additional comments:

Before breakpoint, footer location is at the base of the background picture.

After breakpoint, footer is adjusted upwards (Margin 160 to 180))

Question: How do I configure the footer block to reside at the bottom of the background picture throughout each breakpoint transition?


Resource Links:

https://cloud.githubusercontent.com/ass … 469453.PNG

https://cloud.githubusercontent.com/ass … 85488b.PNG

The margins are still going crazy. You really do not need to use those sorts of dramatic margins. I think what's happening is you have some elements placed, and instead of trying to set those elements up right, you are dramatically changing the margins of rows that you do not need to do really.

So, just take a step back. This new page you created, is actually backwards from what you seemed to intend. It is a mobile first design. The footer is not moving up, its actually moving down. When your slider is highlighting a breakpoint to the left, is means it is using the css and media query for that breakpoints. So in this files, you are working from a small viewport, to bigger viewports. That is OK, its just a little more difficult to design for some people, because content usually needs to be added in, as opposed to being reduced. And, when that column was moving dramatically, it had a margin of 212, that was changed to 600 points at the breakpoint.

This is what I did. I deleted all the breakpoints, and the rest of the margins almost all back to zero. Some columns and paragraphs still had some padding. But I wanted to reset those rows, and even the grid, which you were giving a margin and padding. I also redid the UL, because I believe you editing the text directly to being while. I clicked a list item, gave it a color, and used the class that was created for each of the other list items, and now you can see the bullet points. You can still edit the text directly, but by styling the list item itself and not the text inside, the bullet point can be seen.

The logo and headers are in row one. I swapped the 2nd line of text to a h2 header, because its best to have just one h1 tag on a page. Just for my tastes, I centered the text. I gave the logo some margins, and the bottom <h2> text a larger bottom margin. Doing that increases the size of the row automatically, unless a max height as given to the row. And keep the rows to auto height.

The same with the 2nd row, I gave the block quote a sufficient top margin a decent mount of space, and that same amount to the bottom margin of the unordered list. And that's all you need to do.

You smallest breaskpoint is too small. Older iphones are 320. Anything smaller than that is going to be an smart-watch. I made the next breakpoint (your design is a mobile first) at 480 - that is a iphone on landscape mode. Then another breakpoint at 600 for all those 600x800 tablets, then another breakpoint at 768 for the 768x1024 tablets. The 768 will cover a 600x800 in landscape. Just slide the slider to 800 and see if anything breaks.

For those breakpoints, I basically increased the margins to put more space around the elements. Once out of smartphone sizes, I increased the logo size and some text. And basically, that's it. Do however you would like. You could give the column padding if you want, or even the rows. But I would avoid dramatic margins to position rows, unless there is a particular visual effect you need.

https://www.dropbox.com/s/addg9ixfl4sd1 … d.rsd?dl=0

I noticed in that file that the first row has a max width set - so at some point the content will slide to the center in a larger screen, and the footer will not because it has no max size set.