[Pietro]

Hi,
I’m setting a website with only one column, no sidebars.

The actual width of the body is too high (1140 px I think), is there a way (CSS?) to reduce the body width to a total of 940px and width of text 640, so there will be a distance from text to the border of body of 150px?

Hope it’s clear 🙂

This is the site http://www.sr22bond.info/

Thanks for your help!

[Mahesh]

@pietromessa: Go to Dashboard=> Appearance=> Customize=> Additional CSS and add the following CSS:

.site {
    width: 940px;
}
#main {
    padding: 50px 150px 0;
}
  
@media screen and (max-width: 940px) {
    .site {
        width: 100%;
    }
    
    #main {
        padding: 20px 30px;
    }
}

Regards,
Mahesh

[Pietro]

Thanks, it worked well!

[Mahesh]

@pietromessa: Thank you for your appreciation. Have a nice day!

Regards,
Mahesh

[Pietro]

Hi,
sorry but the sizes of the website are still not the one I want to set.

On the first message, I wrote I prefer these sizes:

Body text width 640 px
Padding 150 px right, 150 px left
Body tot 940 px (640+150+150)

But, after the CSS you suggested me, this is the actual size:

body text width 690
padding 150 px left, 100px right
Body tot 940 px (690+150+100)

So there are 50 px more in the text width and 50 px less on the right padding.

Also, why it has to be modified by CSS code, when there are CUSTOMIZING > SPACING > CONTENT that it should work right for to change the Content Padding?

Thanks for any help

This is the website I want to modify the padding:
http://www.sr22bond.info/

and this is all the CSS code I added on ADDITIONAL CSS:

#hgroup-wrap, #hgroup { padding: 0; }
.site {
    width: 940px;
}
#main {
    padding: 50px 150px 0;
}
  
@media screen and (max-width: 940px) {
    .site {
        width: 100%;
    }
    
    #main {
        padding: 20px 30px;
    }
}

Regards,
Pietro

[Mahesh]

@pietromessa: Well, its because the primary content’s width is 690px. Add the following CSS to fix it.

#primary {
    width: 640px;
}
  
@media screen and (max-width: 1000px) {
    #primary {
        width: 100%;
    }
}

Regards,
Mahesh

[Pietro]

Thanks, it has worked well!

Last question please.

WHen in the future I will update the theme, will I lose all this modifies?

I mean, all the CSS code I add on CUSTOMIZE > Additional CSS, will it deleted with the next updates?

Thanks

[Mahesh]

@pietromessa: Nope. It will remain as it is. Only the changes that you’ve done to theme’s core file will be lost in update. That is why child theme is recommended for customization.

Regards,
Mahesh

[Author]

Posts