Hello, I am currently working on our website, and on a page I have 3 images, one above the other. However, the images have a blank margin or padding arround them, and I’d like to know how to remove it so that the images will occupy the full width of the page and have no separation between each other. The page is this one:
http://www.sunlandstudios.com/partners/
Is there a custom CSS to help me with this? If possible, I’d like this edit to happen only on this single page, instead of setting a new default.
Thanks for the help!
Hi
This might be a little tougher than it looks. You can remove left and right padding but only for the whole #main container, that includes the title for this page. That would look like this:
.page-id-329 #main { padding-right: 0 !important; padding-left: 0 !important; }Vertical spacing is a bit easier, we could do this:
.page-id-329 .panel-grid { margin-bottom: -7px !important; }I suppose we could remove #main padding (first one I pasted) and then just add it back to the page title:
.page-id-329 h1.entry-title { padding-left: 35px; }Appearance > Custom CSS is the place to paste the above.
Hi!
I am currently working on the page, and I added to your code to remove the padding above and below the images too. However, even without padding and removing the vertical spacing, the images still have a white border arround them. Any way I can get it out?
Thank you again
Please take a quick look at the images:
Solid top border:
http://www.sunlandstudios.com/wp-content/uploads/2014/09/RBM_banner.jpg
Dotted top border:
http://www.sunlandstudios.com/wp-content/uploads/2014/09/MSF_Banner.jpg
Solid top border:
http://www.sunlandstudios.com/wp-content/uploads/2014/09/MPL_Banner.jpg
Hope that helps.
On this page, I need the images to fully occupy the page’s widht, so I applied the same CSS you showed me earlier, but I need the text to remain with the padding. Is there a way to do this?
http://www.sunlandstudios.com/contact/
Sorry for the short post, Elaborating more on what you showed me, I had checked all my files before saving and this white border was not there, so that’s why I assumed it could be a code issue. The problem I listed above is what I am trying to solve now.
Thnak you again!
Glad you’re making progress.
All of the CSS I sent through has a page body class prefix. On your new page you’d need to inspect the page’s source code, find the body tag near the top and locate the unique body class within that tag. So for the contact page it’s:
To push everything over you could try:
.page-id-96 p, .page-id-96 form { padding-left: 35px; }Hello,
Unfortunatly it didn’t work D: The padding also applies to the images. Is there no way for it to only affect only texts and plugins?
Thank you for all your help!
The snippet I posted shouldn’t affect your images if they aren’t wrapped in paragraph tags. Alternatively give your text paragraph a class like this:
Then change your CSS to something like this:
.page-id-96 p.text, .page-id-96 form { padding-left: 35px; }Thank you so much! it worked wonders!
Sorry for being such a bother, but I have another doubt.
On our News page ( http://www.sunlandstudios.com/news ), to keep a flow of contect, we set it up as a blog page. However, when I try to put a title image on the top of it (such as in the team page) it wont show on the final page. Nothing that I put on the edit page section for the news page will show up there. Is there a way to make it work?
Thank you again so much for all your help!
No problem. If you set the page template to Blog no other content besides your post feed will render. What you can do is set your page template to Default or Full Width and then from within the Page Builder tab, insert a Post Loop widget. The Post Loop widget will pull your blog feed and you’re free to add other widgets above or below it.