I’m in the process of finishing my website from a structural perspective and I’m having quite a few issues that I just can’t seem to get past and I’m hoping someone can show me where I’ve gone wrong.
My number one issues is when I view my website in the mobile preview, it looks perfect however on my iPhone Xs it looks nothing like the mobile preview. I have attached a screenshot below.
When I scale the browser, in certain positions the nav bar with “president” “gambling” etc overlaps with the slider with the numbers (screenshot below)
Page 4 (Gambling) is all over the place, can’t seem to make the heading behave like a heading and the checkboxes in the grid behave like sub-menu items. The same issue is happening on page 6 (Other).
Good morning @Boris, when you are creating on mobile, watch your VH and VW settings. That is where you will get into trouble most of the time. Also, when using neg margins as well.
@QA_Brandon , thank you so much for your response.
Though changing it to percentage does fix my issue, it also creates another issues as a result:
The navigation arrows fall to the bottom of the screen (on top of the footer). You can see this in your video as well
The “Slider Nav” element which is attached to the slider in the VH metric, also falls to the bottom of the screen which is now scrollable at an (what seems to be) 100% increase.
Any tips on how to get past this? I’ve tried changing it to Auto instead of percentage and PX but it still happens, can’t seem to figure out how to force both elements back to their usual place without going back to VH
I’ve updated the site so you can see for yourself.
