Archived topic

Image offset

5 replies · Started by Eric on July 25, 2021

Viewing posts 1–6 of 6

July 25, 2021 at 11:21 am #1870521

Hello, I'm trying to simply offset and image using CSS but it is not working for some reason. Can you have a quick look and tell me where I'm going wrong?

In my page hero section at the very top, everything worked as planned by tweaking the margins and padding and using a custom class of home-img-1 to apply a negative margin-left: -120px; to offset the image. Great.

Well, further down the page, I am doing the same section, but in reverse, so I simply recreated the hero section and flipped everything around thinking it would work as in the hero section, but for some reason my custom class of home-img-2 margin-right: -120px; isn't working. I can see the img offset works if do margin-left: -120px, but for some reason not margin-left: -120px.

Can you please tell me why it isn't working and where I'm going wrong?

I've included links in the private notes section for your reference.

Many thanks!

July 25, 2021 at 7:06 pm #1870701

Hi there,

You can try this:

.home-img-2 {
    margin-right: -120px;
    margin-left: 120px;
}

You can try this instead.

.home-img-2 {
    position: relative;
    right: -120px;
}

Or this -

.home-img-2 {
    transform: translateX(-120px);
}

July 26, 2021 at 1:54 am #1870996

Hi Elvin, thanks for the CSS. All 3 options work. Out of curiosity, is there a preferred option based on modern CSS best practices or does it not really matter?

Thanks so much!

July 26, 2021 at 5:36 am #1871275

Hi there,

For horizontal ( non animated movement ) i would say the Margins method is the preferred option.

July 27, 2021 at 2:54 am #1872550

Awesome, thanks David

July 27, 2021 at 4:27 am #1872658

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.