Home Issue with viewport in mobile, content is cutting in mobile

Issue with viewport in mobile, content is cutting in mobile

r.i.r
1#
r.i.r Published in 2018-02-14 09:14:17Z
 I defined a viewport of:   This is the html and body style: body { overflow-x: hidden; font-family: Montserrat; font-family: 'Montserrat', sans-serif; } html, section { overflow-x: hidden; }  My problem is that in mobile the content cuts and doesn't fit the screen, like the following example I'm not sure why this is happening anyone can assist? Thanks.
Arne
2#
 Unfortunately not all of your css is available, I guess that your content has a fixed width or a min-width. Just try to give this a max-width: 100%; and your problem should be solved. (If a min-width is present and is not absolutely necessary, it should also be removed.) Basically overflow: hidden; or overflow-x: hidden; does not mean that a kind of "wall" is build where the content stops. Rather, it means: Content is clipped if necessary to fit the padding box. No scrollbars are provided. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow You also may have to adjust the padding or margin of the content for the suitable viewport. For this you can check the link in the comment from @Libin C Jacob.
Elton Jain
3#
Elton Jain Reply to 2018-02-14 09:57:39Z
 Some basic steps to better responsive design: body * { max-width: 100%; box-sizing: border-box; }  You should avoid using overflow hidden unless necessary. Also, you've horizontal scrollbar below because there are 2 columns at the bottom bigger than viewport width.
Alex Raţiu
4#
Alex Raţiu Reply to 2018-02-14 10:19:45Z
 You cand use @media-query to define/adjust width/height or what you what to do at any resolution. @media screen and (max-width:320px) { section { width: 100px; }  This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.
Hiral
5#
 You need to work on CSS at various places. Like below : #mission p{ width:100%; max-width: 420px; float:left; padding-top:26px; text-align: left; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.64; letter-spacing: normal; text-align: left; color: #383836; } #secure p{ width:100%; max-width: 420px; padding-bottom: 189px; padding-top:28px; text-align: left; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.64; letter-spacing: normal; text-align: left; color: #383836; } html, section{ max-width: 100%; overflow: auto; }  Tip : you are not supposed to use fix width of any section or component if you plan for responsive screen. Kindly refer the fiddle here