Help with section width on mobile

Hi there,

I am struggling with the mobile layout for my product landing page. I have used max-width: 100vh for each section, so that it would adapt to different viewports.

However, when I open my project on mobile, the page requires the user to scroll horizontally… Could you take a look at my code and help me figure out what I need to change to fix this particular issue?

https://codepen.io/rossellafer/pen/rKYoGP

Thanks
Rossella

I am hoping that someone can come up with a better answer, but I did find this on stack overflow:

Hope this helps and sorry :cry:

Does the div have padding? If so this will spill past the edges of the viewport. Also did you define the viewport in the head section?

Hi @ozmos, I did define the viewport in Codepen’s settings but no luck unfortunately. And this specific section does not have any padding, except for the text, which has some padding. I have amended this to be a percentage value so it should not be a problem as it’s not in pixels.

@oliverdudman, thanks for the article, and I agree a bit disappointing that the solution is not to use vh units.

How would you go about adapting my sections to use a percentage or pixel unit? The effect I want to achieve is having a section occupy the viewport. Is using media queries for each specific screen size the best solution?

Thanks
Rossella

The first thing to note is that designing pages for multiple screen and browser/devices is difficult. I’ll try to point you in the right direction, but some of it comes down to experience, practice and knowing how to layout you page before you start coding.

  1. The padding can cause issues with an element’s sizing but you can use the box-sizing property to define whether you want the padding included in a elements deimensions:
  1. To achieve an element taking all the entire viewport height (see point 3 before implementing this), I would use a percentage. The thing to remember with percentages is that it is the percentage of the parent element, so if the parent element doesn’t have a properly defined height, then neither will the child. In order to get your section with id="main" to be full height you would also need this in your css (I’ve added a couple of extra bits that I commonly include):
html, body {
 height: 100%;
 width: 100%; // for full width
 margin: 0;// stops white margin around edge of page
}
  1. While you can make a section full height/width, you also need to consider the size of your content. For example (figures are made up), if an iPhone has a screen height of 10 lines and your content is 11 lines then your content is going to overflow your element and, depending on your css, could become hidden (line 11), collide into you next element, or just be outside your containing image (or border etc). Apart from for “home screens” (like your #main section), I tend not to use height for a container unless I know the content will fit for all screen sizes. Remember that desktops also have many different screen sizes.

  2. Media queries can be a good way to resize your content, but it can be tricky to know what your breakpoints should be. You could take a look at the bootstrap framework to see their breakpoints as the library works well across most devices. You can use %, px, em and rem with them and the element can dictate which one is easiest to use. For example, if you want bigger text on smaller screens, you could use rem to relate everything back to the main font-size and then just change the main font-size in your media query.

You page is coming on really nicely, but, may I suggest that you fix the test errors first (I ran the test suite to see where you were at) as I have found it easier to get the tests working before the project code becomes too large. If the test suite forces you to layout your html in a specific way, and you spend hours creating something differently, it is really annoying to have to go back through you code trying to change things until it works.

Hope this helps and gets you moving in the right direction- I had intending on only writing a short post!

:slight_smile:

Thank you so much for these guidelines, @oliverdudman! I really appreciate you taking the time to share your knowledge :smile:

I have struggled with the layout for the past two days, changing the way the navbar was structured as removing the vh units did not resolve the problem. This morning, I uploaded my project on Github to see if the same layout issue was happening, as I could not replicate what was happenign on Codepen on my local version of the page. I am happy to report the background is not stretched on Github and the project passes all the tests for the FCC curriculum :smile:

https://rossellafer.github.io/landing-page-project/

Thanks again for your help!

Hey @rossella.tokyo, you say to have used max-width: 100vh.
But, vh is used for ViewportHeight, and vw is for ViewportWidth, so it should be max-width: 100vw i guess :slight_smile:
Is this a typo…???
Hope this helps you out :slight_smile: