Hi everyone,

I have the following problem with my footer.
I don't get the right margins and alignment on the screens of 832px, 640px.
I have a footer added in annex how he must be made on my website but no idea how I design.
Overall I see that it consists of 2 columns, but I use subgrid and/or containers?
Can anyone help me in this and a good version of my footer designs attached the project
In attactment a screen for the new footer en my project

https://www.dropbox.com/s/cgzibibbetig7 … 2.rff?dl=0


Kind regards
Stephane

If I understand what you want to do correctly, when you hit the 832 break point - I would recommend increasing the sub-grid column containing the phone and email address to 12 spans on that break point (select the appropriate sub-grid column: its class is subgrid-column-1, you use the layout menu to edit the span width).

I note there seems to be an 'empty container' to the right of the container element that holds the email address. That is what causes the 'appearance' of a padding or margin between the linked text and the email address at the lower screen widths. This may be intentional - or reserved for future use... it's not really a problem.

Regards,
Gordon

try and see now

try this link please

You applied flex-box which actually you don't really need to and you could arrange with columns

Updated the project file again

https://www.dropbox.com/sh/4yhs9tupxaob … ws_Ca?dl=0

Mansour

This is the example for developed my new footer:
"footer_for_all_screens_pc_laptop_tablet_not_for_smartphone.jpg"

I want to the footer just like that example but with a left margin of 10px or 20px. This footer contains two columns (subgrids) for all screens except smartphone/mobile phone that only 1 column.
Can you give me the steps how I this footer design as shown in the example?

Kind regards
Stephane

I guess you need to rebuild it, now it's too late for me build for you I am going to bed sorry. it's 2am here

Hi all

That is the image that I see from my footer via google chrome. I get the left margin but not nearly at the top left corner. I want the text "contact", "telephone" and "email" 10px from the left margin.
But how do I do that have already tried but I fail not.
Can someone check out that footer designs will with flexbox are I think.
the texts and the list have more need to go to the next place to go
the fooder should be wider so the whole width of the browser.
The left margin of the footer must be 10px or 15px on the left. Is to wide now in the footer

Kind regards
Stephane

Stephane try this and you won't go wrong,

https://youtu.be/rj8Xg2Kk4Us

By the way, as an extra option you can add a container into each Subgrid Columns too, choice it's yours, by the adding container into Subgrid Columns you have better choice to controlling their width and so on...

Hi Stefke,
You are saying that you want to have the footer cover the whole width of the screen. You can change that by setting max-width to 'none' on the row.

Something that might be a problem: You have only one single row in the whole layout. So if you set max-width none on the row, everything will be spread out to 'wall-to-wall'. Normally you would have one row for the header, one for the navigation, one for the main content and one for the footer. If you had done that, you could just set the 'none' on the footer row.

But since you (or 'we', actually) already have this design now with one row, you can make the columns of the main content just 10 spans instead of 12, and then set the columns to 1 span offset. I'm including an image to let you see how to do it.

Now you need to decide if you want everything cover the whole width or just the footer.

If you want it all wide, just do what I said in my first paragraph above here. If you just want the footer wide, then do as I said in the third paragraph.