Reducing footer width pushes logo off

[de_Klee]

When I reduce the width of the window, the logo below is squeezed off the page.

I have had to change the navigation to a block, rather than inline. And unless I give the navigation margin-left: 380px to move it over next to the contact details:

So I understand that it is the margin-left that triggers the logo to be pushed off the page.

But if I don’t put the margin-right there, the nav sits right in the middle of the footer (I need it to be on the right and shrink when the screen width is reduced:

So I have two questions:

1 - How can I position the nav on the right, next to the contact details?
2 - How can I ensure the logo is not pushed off the page when the screen width is reduced?

[nico]

Hi @de_Klee,

Thanks for writing in.

I would like to suggest a CSS however it would be best that we could check your setup first. Please share us your URL so we could test the CSS first to prevent long threads.

Let us know how it goes.

Thanks.

[de_Klee]

Thanks for getting back so quick

https://paddydeklee.com/about-copy-2/

[friech]

Hi There,

From what I see you try to position things using margins, that’s not the way Flexbox works and will just give you problems over time. Please watch the Flexbox video here (you can start at 12:40 minute mark)

The idea is to have your columns a flex basis (base width) and then let the first column grow (flex grow) so it will take the remaining space.

Watch the entirety of the video to learn how to position things in a flexbox.

Hope that video helps,
Cheers!