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.

PageBuilder problem with padding

Open 6 replies pluginplugin-page-builder
Will Webb
10 years ago · Last reply by Andrew Misplon 10 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Andrew Misplon Staff 10 years, 10 months ago

    Hi Will

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

    Thanks.

  2. Will Webb 10 years, 10 months ago

    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. Andrew Misplon Staff 10 years, 10 months ago

    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. Will Webb 10 years, 10 months ago

    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. Will Webb Private 10 years, 10 months ago

    This is a private message.

  6. Andrew Misplon Staff 10 years, 10 months ago

    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.

Have a different question or issue?

Start New Thread