CODEWITHSUNDEEP
htmlcsswordpress
g4bb4g4nd4lf
g4bb4g4nd4lf

Reputation: 1

Wordpress: Container doesn't take full width when in responsive view

I've been reading the tips here for a long time and received a lot of help. Today I am in the need of individual help...

The responsive view (< 1024 px) should be full-width and centered with a little padding. The padding works fine, but the content doesn't fulfill the whole page with a big margin on the right. I tried all of the css tweaks listed here. The actual custom css code is:

@media only screen and (max-width: 1024px){
#boxed, html, body, div.container.main-content
{
width:      100% !important;
margin:     0px;
}
.row
{
margin:     0px !important;
width:      100% !important;
padding:    15px !important;
}
.container, .container-wrap
{
margin:     0px !important;
width:      100% !important;
padding:    0px !important;
}
}

The website is www.timschuermann.com/dev/

Thank you for your help in advance

Tim

Update 1

Thank you for your quick answers! I tried all the suggestions, it still doesn't work.

The actual code is:

@media only screen and (max-width: 1024px){
div.container.main-content
{
width:      100% !important;
margin:     15px auto !important;
}
#boxed, html, body
{
width:      100%;
margin:     0px;
}
.row
{
width:      100%;
margin:     0px;
padding:    0px;
}
.container, .container-wrap
{
margin:     0px;
width:      100%;
padding:    0px;
}
}

The actual design is exactly the one I got "out-of-the-box".

I want the content to be displayed bigger, with a 15px margin left and right.

But there is also a new problem: On my iPhone there is blank room, colored grey, above the content. After reloading it goes away?

I hope you understand what I mean and can help me.

Thanks in advance

Tim

Upvotes: 0

Views: 1265

Answers (2)

blecaf
blecaf

Reputation: 1645

Too many "!important" is not needed is causes css overiding issues. But to fixes yur current issue you have to uses "!important" because of previous uses on the same element

@media only screen and (max-width: 1024px) {
div.container.main-content {
    width: 100% !important;
    margin: 0px;
    margin: 0 auto !important;/**Added This **/
}
}

But will advised to revise your code when you have the time, to removed unnecessary ones. hope this helps.

Upvotes: 0

Marijan
Marijan

Reputation: 1865

Please avoid using !important. It will give you are hard time when you need to change your stylesheet later on.

To center the container please add the following.

div.container.main-content {
    margin: 0 auto;
    max-width: inherit;
}

Upvotes: 0

Related Questions