Docs

[ptbright1]

I’m trying to have a background image in one section, with two elements on top. One element is text and one is an image of a sculpture. Right now, I have the background and sculpture as ONE image, but this isn’t what I want, since it’s bad on responsive.

Once I get the individual sculpture image file in place, what code do I need to add for it to bottom align with the background, just as it does here on desktop view: http://dev.paterakoristudios.com/about/

Thanks!

[Christopher]

Hi there,

Please enable ‘marginess columns’ option and add vertical-align: bottom; in right column’s style field.
Add mbn in image’s class field.

Hope it helps.

[ptbright1]

I’ve done this, but am not getting the sculpture image to bottom align with the section (background image). What am I missing.

Also, once this goes into responsive, how can I ensure the sculpture image is centered?

[Jade]

Hi there,

Please select the section and set the bottom padding to 0 then add this in the style field of the image position: relative; bottom: -15px;

Hope this helps.

[ptbright1]

Thanks that was helpful, but it’s still not quite right on responsive. How can I make sure it doesn’t fall this low on responsive (going below background) and how can I center it once it leaves desktop view?

[Rupok]

Hi there,

I can’t see this on your given page. Did you remove that?

[ptbright1]

Oh, it’s on the homepage now–

dev.paterakoristudios.com

[Nabeel A]

Hi again,

Please replace your inline style with position: relative; bottom: -15px; height: 100%; and then add the following code in your Customizer:

.home #x-section-1 .x-container.marginless-columns .x-column.x-1-2 {
    height: 100% !important;
}

@media screen and (max-width: 828px){
.home #x-section-1 .x-container.marginless-columns .x-column.x-1-2 img {
    bottom: 0 !important;
}
.home #x-section-1 .x-container.marginless-columns .x-column.x-1-2 {
    text-align: center !important;
}
}

Let us know how this goes!

[ptbright1]

Aha! I think that did the trick. Thanks and rock on!

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts