This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Remove image margin / padding from page

Open 10 replies themetheme-vantage
Sunland
11 years ago · Last reply by Andrew Misplon 11 years ago

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!

URL: http://www.sunlandstudios.com/partners/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Andrew Misplon Staff 11 years, 5 months ago

    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.

  2. Sunland 11 years, 5 months ago

    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

  3. Andrew Misplon Staff 11 years, 5 months ago

    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.

  4. Sunland 11 years, 5 months ago

    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/

  5. Sunland 11 years, 5 months ago

    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!

  6. Andrew Misplon Staff 11 years, 5 months ago

    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:

    .page-id-96

    To push everything over you could try:

    .page-id-96 p, .page-id-96 form { padding-left: 35px; }
  7. Sunland 11 years, 5 months ago

    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!

  8. Andrew Misplon Staff 11 years, 5 months ago

    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:

    <p class="text">Text goes here.

    Then change your CSS to something like this:

    .page-id-96 p.text, .page-id-96 form { padding-left: 35px; }
  9. Sunland 11 years, 5 months ago

    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!

  10. Andrew Misplon Staff 11 years, 5 months ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread