Docs

[yhshin1020]

Hey,

I have an image in a content band with a class “testdiv” and I want to be able to position the image in the center bottom of the div. The div has a variable height (by setting padding in %).

I was able to achieve this effect using background-position: center bottom;, but I do not want to have it as a background. Instead I would like to have it as an image element.

Currently my code looks like this:

.testdiv{
   padding: 5% 7% 10%;
   position: relative;
}

.testdiv img{
  display: block;
  max-width: 100%;
  position: absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
}

The code doesn’t work, and the image is not at the center bottom. I have two images on the page, I am referring to the one with class “bottomdivimage”.

My question are as follows:

1) How do I position the image with class “bottomdivimage” to the bottom and center of the content band
2) How can I only target the image with the class “bottomdivimage” and not the other image? Currently the selector .testdiv img targets both images. The selector .testdiv .bottomdivimage doesnt seem to work for some reason.

Thank you.

[yhshin1020]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! Do you want something like this?

Please update your code and use this instead:

.testdiv{
   padding: 5% 7% 0;
   position: relative;
}

.testdiv img{
    display: block;
    margin: 0 auto;
}

We would loved to know if this has work for you. Thank you.

[yhshin1020]

It worked at first, but now its not positioned at the bottom of the div again.

Any help is appreciated.

[yhshin1020]

ACtually, this only happens when I change the text to a custom headline.

What could be causing this problem?

[Rue Nel]

Hello There,

Could you please change it to custom headline so that we could see it? This could help us provide a custom code tailored for the custom headline.

Thank you in advance.

[Author]

Posts