Building "Even More Services" with full width photo

Hi all, I’m having trouble figuring out how to build a row like the “Even More Services” section of the Sydney Pro 2 homepage. Any ideas on how to get a photo bleed full width?

Thanks in advance.

Julie

Hi,

You just need to add a background image to the column of the row. See this screenshot:

Thanks! There must be something else I’m missing, as that block is
appearing blank: http://testsite.millercenterlewisburg.com/ Beside “More
Than A Gym.”

Hi,

Looks like you need to set the height of the column with a fix number not percentage. Please put this line:

height: 550px;

in here:

Regards,
Awan

Hm, thanks it’s still not working. Here’s the result, which you can see at
testsite.millercenterlewisburg.com

Hi,

Please try to add this also in CSS style field:

padding-left: 0px !important; padding-right: 0px !important;

Thanks, that still is not working.

Hi,

That you mean that there should not have a space below the image?


If yes, I think the image already displays the max size on the section. So, to decrease the space below it, you can try to reduce the space on the “More Than A Gym” section.

Please try add this CSS code to Customize > additional CSS:

div#panel-220-1-0-0 .panel-widget-style {
    padding-top: 30px;
    padding-bottom: 0;
}
div#panel-220-1-0-0 .panel-widget-style .widget-title {
    margin-bottom: 30px;
    padding-bottom: 15px;
}

Regards,
Awan

Figured it out! No CSS required. When editing the entire row, I selected “Full Width Stretched” as the Row Layout. Messed around with the padding on the left text, but not on the picture.