Home Issue with viewport in mobile, content is cutting in mobile
Reply: 4

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:

<meta name="viewport" content="width=device-width, initial-scale=1">

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#
Arne Reply to 2018-02-14 09:45:35Z

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#
Hiral Reply to 2018-02-14 10:31:11Z

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

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.327019 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO