Home>Support>PageBuilder problem with padding

PageBuilder problem with padding

By Will Webb, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hello,

I have a row made from PageBuilder which is formed of 4 cells, each of which are SiteOrigin Image widgets, each 25% of the page to allow for full width stretched.

However when previewing the page and inspecting the elements i’m seeing:

#pg-131-0 .panel-grid-cell, #pg-131-1 .panel-grid-cell, #pg-131-2 .panel-grid-cell, #pg-131-3 .panel-grid-cell, #pg-131-4 .panel-grid-cell {
padding-left: 15px;
padding-right: 15px

where as the row inspection shows:

margin-left: -155.5px;
margin-right: -155.5px;
padding-left: 0px;
padding-right: 0px;
border-left-width: 0px;
border-right-width: 0px;

Is there anywhere via PageBuilder that I can set these to 0px so all my images dont have this 15 padding between them?

Also i want to have these as display: block so when on a mobile device they will again have no padding and sit on top of each other.

Many thanks in advance.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Will

    Any chance I could see this on your site? I’ll try help out from there.

    Thanks.

  2. 10 years, 3 months ago Will Webb

    Sorry I wouldn’t be able to share the live site, maybe I could take a clone and put up on personal hosting to show you. Or is there any other way you could help?

  3. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    There is a private reply option below if you’d like the link to remain private. The checkbox is in the bottom right. Only SiteOrigin and you will be able to see the reply. We can also delete the entire thread when done if you’d like.

  4. 10 years, 3 months ago Will Webb

    I managed to fix the issue by going into PageBuilder settings and removing the default 15px padding it gave by default and set this to 0px, so now my images on rows are touching as i wanted, but when re-sizing down my browser the image itself isn’t filling the cell completely (at max-width 960px) – it causes a whitespace underneath

  5. 10 years, 3 months ago Private Message - Will Webb

    This is a private message.

  6. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Thanks Will. The text block between the turtles and surfer has the follow CSS styles added:

    margin-top: 220px;
margin-left: 80px;
margin-right: 80px;

    Those are causing the responsive problem.

    I don’t have an immediate solution for this. What you could do is remove those from the widget Attributes tab and instead add a class name, then target that class name under Appearance > Custom CSS.

    Under widget Attributes CSS Class:

    text-padding

    Then under Appearance > Custom CSS:

    .text-padding {
/* Properties go here */
}

@media (max-width: 960px) {

.text-padding {
/* Change the properties to adapt */
}

}
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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More