Reputation:
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.
Upvotes: 0
Views: 747
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
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
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
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.
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