Content Area not scaling for mobile

Hi josephare,

Looks like you need to make sure all your divs are fluid:

.site-content
{
max-width:900px;
width:100%;
}

thanks, just tried that but nothing changed.

the css on your site i see is:

.site-content {
margin: 24px 0 0;
/* margin: 1.714285714rem 0 0; */
padding: 0px 0px 0px 0px;
background-color: #000050;
color: #fff;
width: 900px;
}

change it to:

.site-content {
margin: 24px 0 0;
/* margin: 1.714285714rem 0 0; */
padding: 0px 0px 0px 0px;
background-color: #000050;
color: #fff;
max-width: 900px;
width:100%;
}

This is what it looks like now:

/* 12.1 Minimum width of 770 pixels */
@media screen and (min-width: 770px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
.author-description {
float: right;
width: 80%;
}
.site {
margin: 0 auto;
max-width: 960px;
width:100%;
/*max-width: 68.571428571rem;*/
overflow: hidden;

}
/* affects only blog post pages */
.site-content {
float: left;
width: 65%;
}
body.template-front-page .site-content,
body.attachment .site-content,
body.full-width .site-content {
width: 100%;
}
.widget-area {
float: right;
width: 30%;
}
.site-header {
text-align: center;
}

where do you see that code?

Found it, it’s fixed, thanks for the help!!

you can add it in that media query or you can edit the media=all. This would be best as it is fluid across all screen resolutions. But that is definitely your problem because you have a fixed width of 900px on site-content div.

You can try adding importance to it

.site-content
{
width:100% !important;
max-width:900px;
}

it’s def best in global site-content, I just missed it, thanks again!