Project : Taxi Company - The footer &...

User 131545 Photo


Registered User
687 posts

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

Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 515127 Photo


Registered User
116 posts

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
User 434929 Photo


Ambassador
938 posts

try and see now
Attachments:
Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

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
Attachments:
Guys at coffeecup are awesometacular.
User 131545 Photo


Registered User
687 posts

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
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 434929 Photo


Ambassador
938 posts

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
Guys at coffeecup are awesometacular.
User 131545 Photo


Registered User
687 posts

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




Attachments:
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 434929 Photo


Ambassador
938 posts

Stephane try this and you won't go wrong,

https://youtu.be/rj8Xg2Kk4Us

Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

STEFKE wrote:
Hi everyone,

Overall I see that it consists of 2 columns, but I use subgrid and/or containers?



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...
Guys at coffeecup are awesometacular.
User 122279 Photo


Senior Advisor
14,447 posts

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.
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



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.