Screen issue
My website work correctly but when i scroll down on mobile then i face the moving screen issue i also apply overflow hidden in css
html, body {
background: #f4fcec;
margin: 0;
padding: 0;
overflow-x: hidden !important;
box-sizing: border-box;
}
this is my css boilerplate
4 Replies
I suspect that your hidden slide-in menu is causing that.
I am on the mobile right now sonI can’t see the source code so I can’t really make any coding suggestions.
First, try to move box sizing, margin and padding to * {}
If this doesn’t fix it, we have to deep dive into your code.
I would also try to avoid overflow hidden and especially important 🙂
I have had a chance to look at the code.
As suspected, this is being caused by your "hidden" menu on smaller screens. The overflow is being caused because you have absolutely positioned the element to the right of the main content, effectively making it twice as wide as the viewport.
I suggest that you use
transform:translateX(100%); rather than right: -100%;right and adjust your JS to set the translate position to "0" rather than -100%
So, in Tailwind terms, swap right-[-100%] for right-0 translate-x-full and, as I say, adjust the JS accordingly so that it just sets the translateX to 0.
And, as a suggestion, the top: 15% seems a but random.
Whilst I know that a lot of people would disagree, I would recommend giving a fixed height to your header, eg h-40 (in Tailwind terms) and use this same value to offset the nav menu by the same amount, ie top-40. This will ensure that it is placed directly below the header and not cutting accross the hero section as it is now.
I hope you don't mind but, after looking at your code, I think that you are over complicating a lot of things and appear to have a lot of extra HTML mark-up that really isn't needed. These things are leading to some of the issues that you have regarding the responsiveness.
For example you are wrapping the links in divs which really isn't necessary and adds nothing to the content.
Another issue you have is that you have used a div for the nav toggle. This should really be a button as it holds a user event.
You also have h2 elements for links, h2 (and all the "hX" tags) should really just be used for headers.
I have taken your header section and simplified the code a bit (though it could be taken further) just in case you are interested:
https://codepen.io/cbolson/pen/eYwEgjP
(note - I know you are using React but I just added the eventlistener on the nav toggle button using vanilla JS for the demo)Thank you, Chris, for your help and for taking the time to read my code. 😊