CODEWITHSUNDEEP
htmltwitter-bootstrapcss
user8899874
user8899874

Reputation:

Issue with viewport in mobile, content is cutting in mobile

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

enter image description here

I'm not sure why this is happening anyone can assist?

Thanks.

Upvotes: 0

Views: 747

Answers (4)

Hiral Vadodaria
Hiral Vadodaria

Reputation: 19250

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

Upvotes: 1

Alex Raţiu
Alex Raţiu

Reputation: 127

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.

Upvotes: 0

scazzy
scazzy

Reputation: 978

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.

Upvotes: 0

Arne
Arne

Reputation: 1135

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.

Upvotes: 3

Related Questions