Hi,
You can manage those widget padding from: Edit page > edit row > row styles > theme > top/bottom padding.
Let me know how it goes.
Thank you,
That helped to get rid of the top/bottom padding but I still can’t get rid of padding on the right/left sides. For example, if I put a background image in one of the widgets that I want to span across the whole page how would I do that?
Hi,
Sorry for late reply. To make the section of your widgets displayed full width, you have to change the row layout of the rows. Please edit page > edit row > row styles > theme > row layout > full width
Helly I have the same issue,
I have row (set to full-width-stretched, top/bottom padding 0) with 2 columns, left a text widget, right a video widget. Top/bottom padding 0 works.
And then I set “padding 0” in the video widget to get rid of the right whitespace, but still has white space on the right (is this a css bug?).
I could fix it via custom css but I wanted to use the build in options, especially to make it easier for non-admins who work with the site.
Thank you
Hi @fantasmo,
Please clarify that you’ve checked the Column Padding in Edit Row > Row Styles (scroll the option to the bottom)
Oha 🙂 thank you that was it.
Thank you for your help!
I am wanting to remove the padding below the title bar on each of the pages could you help me or show me what I am doing wrong I have the padding set to 0px on everything but every time the setting says 100px my Web page is http://Www.trxctiming.com
I fixed the padding issue i was having but now i am running into another padding problem, Now i would like to shrink the padding around my content area here is my website.
http://trxctiming.com/wp2/track-field/track-field-meet-information/
I am using tablepress in this page but I dont think that is the problem and I have the full-width template selected for the page attributes but I do not like that there is so much space on the right and left of my data. Can anyone help me
Hello @zreece3,
You can use this CSS code to make the content displayed full-width:
.page-id-67 .page-wrap .content-wrapper.container {
width: 100%;
}
That worked great. Where did you find the page-id for that page? I have a few other pages I would like this to them
Yes, I am using page-id to achieve that.
You can use “Inspect element of the browser to get the page id:
1. Right click your browser then click “inspect” http://prntscr.com/du4cn9
2. Here is the page-id http://prntscr.com/du4cbd
Can I change this code
.page-id-4756 .page-wrap .content-wrapper.container {
width: 90%;
}
so that it would apply for every page? I am guessing that I would need to change something in the .page-id-, Ive tried -all with no success
Hi,
You can just need to change .page-id-4756 to .page
zreece3 please, how did you manage to remove the 100px padding? I dont know where it is anymore, it is not even in the parent theme css file anywhere T.T
thank youu!
@petra47
I went to Appearance and Customize then at the bottom there is an Additional CSS area and I put this information in
@media (min-width:769px) {
.page-wrap .content-wrapper.container {
width: 90%;
}
}
@media (max-width:768px) {
.page-wrap .content-wrapper.container {
width: 100%;
}
}
I broke it down for media breaks as well so if someone was looking at it on a mobile device it would use 100% of the page and then one a computer it would use 90% of the screen. I do not like using px any more because of all of the different sizes %’s have worked better for me. If you want to have the same padding for both devices just put this in
.page-wrap .content-wrapper.container {
width: 100%;
}
and select the width you want
