How do I make a wordpress theme full width?

Question

I tried my best but I couldn\'t make the following theme full width/screen by editing the CSS. I\'d be very much grateful if you could show me or give me a hint regarding this c

Answer 1

Replace the following styles and that will do it

Style.css line 305

.primary-navigation {
display: block;
float: left;
width: 100%;
text-align: left;
}

Style.css line 174

#page, .container {
max-width: 100%;
min-width: 240px;
}

Responsive.css line 63

.main-container {
max-width: 100%;
}

Answer 2

Try to click on Appearance >> Customize >> Additional CSS.

.container {
    width: 70%;
}

Answer 3

To accomplish something like this http://i.imgur.com/mekVyJg.jpg you will need to do the following changes in your css file:

.main-container {width:100%;max-width:100%}
#page, .container {width:100%}

Answer 4

I was using GeneratePress theme and Elemetor page builder and had same problem on mobile-view. here, elementor-page is section where all content goes.

I used this code:

@media only screen and (max-width: 480px){
    .elementor-page{
    overflow-x:hidden;
}}

Answer 5

do the following change in responsive.css file

.main-container {
    /** max-width: 96% replace this with bellow  */
    max-width: 100%;
}

remove these styles from style.css file

.main-container{
    width: 1170px;
}
.container{
    max-width: 1170px;
}
.primary-navigation {
    max-width: 1170px;
}

Then your site will work full-width