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.

Best sizes for graphics in multi-column row

Resolved 8 replies pluginplugin-page-builderpremium
Buck Lawrimore
10 years ago · Last reply by Andrew Misplon 10 years ago

We are converting a client’s static HTML site to the Vantage theme using Page Builder. We are finding that the graphics from the old site are apparently too small for the default column or cell widths because the margins between them appear undesirably large. We have tried playing with the margin controls in Page Builder but still have about .4″ of white space between the columns.

We are wondering if the problem is that the graphics, coming from the old site, are too small for this responsible theme. Is there a standard or desired width for graphics that are 1/3 page and 2/3 page in size so that they fully fill each cell or column? See for example this page on our construction-test site:
http://lci2.com/markets.html

Thanks for a great theme and plugin combination.

URL: http://lci2.com/markets.html

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

Need fast email support? Get SiteOrigin Premium

Replies

8
  1. Magus Staff 10 years, 8 months ago

    Hi Buck

    Please try navigating to Settings->Page Builder->Layout and adjusting the Row Gutter option. There are no defined sizes for images that can be displayed, they should resize to fit the container. In your case this function is being overridden by the Jetpack Photon Module. If you disable this and adjust the gutter you should get your desired result.

    Let us know how you get on

    Magus

  2. Buck Lawrimore 10 years, 8 months ago

    That is very good to know. I will turn off this module and see what else we can do to get the result we want.

  3. Buck Lawrimore 10 years, 8 months ago

    Removing the Photon Module was a big help, but now I need to control the left and right horizontal padding of the rows without increasing the top and bottom padding. Can you tell me what CSS code controls that or how to change it?

  4. Andrew Misplon Staff 10 years, 8 months ago

    Hi Buck

    We’ll hopefully have top, right, bottom, left padding in a future release of Page Builder. For now we can use the Attributes tab and a little Custom CSS.

    Edit a row, click Attributes top right, enter a row class name of your choice, for example:

    custom-padding

    Then under Appearance > Custom CSS target that class:

    /* Page Builder Custom Classes */
.custom-padding {
padding-right: 10px !important;
padding-left: 10px !important;
}

    Hope that helps.

  5. Buck Lawrimore 10 years, 8 months ago

    Thank you for the prompt and considerate service! I will give that a try!

  6. Andrew Misplon Staff 10 years, 8 months ago

    For sure, let us know how that goes :)

  7. Buck Lawrimore 10 years, 8 months ago

    Instead of the class being .custom-padding (which did no good), it should be .panel-grid (which works perfectly on all pages with just one CSS addition)

  8. Andrew Misplon Staff 10 years, 8 months ago

    Super, glad to hear you made progress. Thanks for keeping us updated. All the best.

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