CODEWITHSUNDEEP
csswordpresswidth
SirDarknight
SirDarknight

Reputation: 83

How do I make a wordpress theme full width?

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 customization.

http://demo.mythemeshop.com/sociallyviral/

You see the footer in the above theme(It's full width), how do I make the whole theme's body/container full width like the footer?

Note: I tried adding/removing margins/paddings etc.

Upvotes: 0

Views: 21469

Answers (5)

Jay
Jay

Reputation: 1

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;
}}

Upvotes: 0

Serge V.
Serge V.

Reputation: 3613

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

.container {
    width: 70%;
}

Upvotes: 0

LSN
LSN

Reputation: 328

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%;
}

Upvotes: 0

Ajith
Ajith

Reputation: 639

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

Upvotes: 0

Rise Ledger
Rise Ledger

Reputation: 969

To accomplish something like this https://i.sstatic.net/WYosU.jpg you will need to do the following changes in your css file:

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

Upvotes: 1

Related Questions