Responsive footer - Post ID 270214

User 2655766 Photo


Registered User
12 posts

I am having trouble with the 3 column footer included in the components section.
How do I make it span 100 % rather than wrapping the 3rd column when going from 768px to 575?
I'm sure it is something simple with the sub grid I am missing.

Thanks
James
User 122279 Photo


Senior Advisor
14,652 posts
Online Now

Is this what you want?
If it is, you can save it as a component to have it for later.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2655766 Photo


Registered User
12 posts

Yes, Thank you.
Now please tell me what you changed different from the one included with RSD V2.
I added the one from the Components at the bottom of my page but it did not respond as well at 575px.

James
User 2655766 Photo


Registered User
12 posts

And how to import it.
User 122279 Photo


Senior Advisor
14,652 posts
Online Now

What I changed:
There is a subgrid with three columns. On narrow view they cover 6, 6 and 12 spans (the 12 spans one drops below the other two). I changed that to 3, 4 and 5 spans (has to be 12 all together). Further up to wide, the columns are set at 4 spans each, but if you want to keep them at 3, 4, 5, that is ok and will give some more room for the third column which has more contents.
You may want to place a breakpoint and set all columns at 12 spans below about 300px, though, as the text then would be wider than the column width.

How to save:
Open the project I sent, select everything, and under Elements - 'Components' click on create component from the selection. Then you will see a wee upload arrow. clicking that will enable you to upload the component to the component library. You need to log into your Coffeecup account to do that.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2655766 Photo


Registered User
12 posts

I did change the sub grid columns but I was doing 4, 4 and 4 for a total of 12. I see now the elements inside were pushing it too wide.
Setting them at 12 for smaller displays would then stack the sub grid columns as if they were rows. I see now.
I was trying to select the grid (everything) but see I have to select the row and save as component.
Can different attributes, such as span or centering of elements be set for any breakpoints? I ask because I notice as I drag the slider the footer does not span fully between a couple of breakpoints. When I do change the spans to 4,4,4, at 913px, it still does not span fully, in RSD or when I preview.
FYI, your information brought me to that “Ah ha” moment on some of the responsive programming concepts as well as more info on sub grids. Thank you very much.
Have a great day.
James
User 122279 Photo


Senior Advisor
14,652 posts
Online Now

I'm glad it gave you the a-ha moment ;) And yeah, when I said 'select everything', I should have been more precise...
The file I sent expands for me wall to wall at all breakpoints. If you have a background colour, have you added it to the row? If you apply it to any element inside the row, there might be margins or padding showing up left and right.
The width for the row has to be set to auto and max-width none.

If this doesn't relate to your problem, it would be best if you posted your project file here. Zip it up, or if it is too large, upload it to Dropbox and let us have a link.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,652 posts
Online Now

Forgot something: You can change the spans and any other css related properties at any breakpoint. You can also create your own breakpoints. They will be white, as opposed to the 'default' ones which are blue. The blue ones cannot be moved, but the white ones can.
With RSD2 you start from mobile size and work your way up. The settings you make before moving the slider past the first (left-most) breakpoint will take effect all over the various widths. Therefore, when moving past the first breakpoint, you most likely want to change something, so that the design becomes better fitting. Again, all the sizes upwards will get the same settings. Again you may want to adjust the look of the page after the next breakpoint up.
If you are like me, you will most likely make changes to something that you want to appear on all screens, and forget to move the slider down again first. I have very often had to adjust settings at small size after I had done them at wider sizes, just because I forgot this.
Good luck with it, and just yell if you need some assistance! ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2655766 Photo


Registered User
12 posts

I started wrong, desktop down, but see the ease that starting mobile up will provide.
Another thing, I created the footer, and saved as a symbol, but when I updated some of the links, the rest did not update on other pages. I was under the impression, they should update globally.
They are the text links on the left. as well as adding inline links, for emails, to the paragraph element on the right.
Any trick to this?
User 122279 Photo


Senior Advisor
14,652 posts
Online Now

I do it like this:
Create the 'symbol'
Add it to the pages you want it on.
Then on one of those pages edit the text/link/whatever, and then the changes appear on all the pages.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.