Responsivness does not perform well on my phone

Design help Layout & Design
1

Hello dear community,

I am building a multiple page website for a client and am going to deliver soon but I can’t make it responsive, I don’t understand what’s happening with my design!

If you are interested to help me, I invite you to go to page “S.U.P.L pneumatik” and check the menu called “En-tête”. I’ve tricked different things in order to make everything responsive and it looks perfect on my laptop.

But when I open it on my Google Pixel 7 Pro phone, here is what I got:

Screenshot_20230602-160639
Screenshot_20230602-160639864×1872 148 KB

Screenshot_20230602-160647
Screenshot_20230602-160647864×1872 71.6 KB

It seems that some of the elements from my pages exceed the viewport parameters.

I hope that an expert could help me!
Best Regards

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Florian!

You can wrap all your sections in a div and give it an overflow:hidden to try and solve this issue, but you didn’t share a read-only link, it’s hard to confirm :wink:

3

Hey @RoryVB , thank you so much for your answer.

This tip worked, that’s wonderful! Many thanks :raised_hands:

Isn’t it a bit unconventionnal to put all the content into one main div though?

PS: The link has been updated.

4

Maybe a bit, but it does have some advantaged. Finsweet Client-First building structure event does it twice! :yum:

image
image954×517 79.9 KB