Tagged: padding
- This topic has 7 replies, 2 voices, and was last updated 6 years, 9 months ago by
Mahesh.
-
AuthorPosts
-
December 14, 2016 at 9:45 pm #105368
Pietro
ParticipantHi,
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!
December 15, 2016 at 10:31 am #105387Mahesh
Keymaster@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,
MaheshDecember 15, 2016 at 10:33 pm #105418Pietro
ParticipantThanks, it worked well!
December 16, 2016 at 10:46 am #105436Mahesh
Keymaster@pietromessa: Thank you for your appreciation. Have a nice day!
Regards,
MaheshDecember 17, 2016 at 10:15 am #105475Pietro
ParticipantHi,
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,
PietroDecember 18, 2016 at 11:07 am #105514Mahesh
Keymaster@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,
MaheshDecember 19, 2016 at 10:30 am #105548Pietro
ParticipantThanks, 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
December 19, 2016 at 4:14 pm #105562Mahesh
Keymaster@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 -
AuthorPosts
- The topic ‘How to change Body width’ is closed to new replies.