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.

How to set max width for a background image in a row?

Open 3 replies developerpluginplugin-page-builder
Kasra Yousefi
8 years ago · Last reply by Alex S 8 years ago

Hi There,

I have full-width rows with background images set to “cover” on the following page:

http://www.bigbossgroove.com.au/en/index.php/band/

Now if you check the following on a desktop browser with a large screen (w>1280), you will notice that if you maximize the window to expand to the full screen, background images stretch to the extent that faces are not completely visible.

How can I set a maximum with for the rows (or the entire container), so it only scales up to an extent and stops there?

Thank you very much in advance,
K

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

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Alex S Staff 8 years, 9 months ago

    Hi Kasra,

    This is tricky as the row layout you’re using (full width stretched) is designed to break the theme’s container. Hm. Would you be okay with changing row layout back to standard for each of rows and increase the container width itself to be a maximum width of 1280, without padding?

  2. Kasra Yousefi 8 years, 9 months ago

    Hi Alex,

    First, many thanks for helping me with this.
    I'm trying your suggestion now. Obviously, I can easily switch the row layout back to standard, which I did in a test page. But exactly which CSS class I should set for the container to be 1280px? and is there anything else you suggest I should add, in addition to setting the width property?

    Thank you very much in advance,
    Kasra

  3. Alex S Staff 8 years, 8 months ago

    Hi Kasra,

    You can change the container of your theme with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:

    Just the test page:

    .page-id-823 .site-inner, .page-id-823 .wrap {
	width: 100% !important;
	max-width: 1280px;
}

    Globally change the container width:

    .site-inner, .wrap {
	width: 100% !important;
	max-width: 1280px;
}

    You might also need to install the SiteOrigin CSS Editor.

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