[Resolved] difficulty centering image in GenerateBlock grid container

[Pauline]

Hi

I’m having difficulty centering an image on MOBILE VIEW in a GenerateBlock Grid. It’s the one under my homepage hero – the bottle stubbornly clings to the left of the grid container. The text center-aligns fine.

I’ve duplicated the whole container (underneath) and manually adjusted the padding. It looks good on the browser’s responsive design mode for mobile, but when viewed in the customizer and on a mobile, even the bottle there is offset a bit to the left.

Is there any way I can automatically center it (like I centered the text?). The grid is 2 column: 75% and 25%.

Would be grateful for advice.

Many thanks.

[Leo]

Hi there,

The issue seems to be coming from this CSS you’ve added:

@media (max-width: 768px) {
    .whiskey {
        max-width: 30px;
    }
}

If you remove that, then the image should center.

If you want to use that, then modify the CSS to this:

@media (max-width: 768px) {
    .whiskey {
        width: 30px;
        margin-left: auto;
        margin-right: auto;
    }
}

[Pauline]

Leo, THANKYOU so much – I had been adjusting the spacing options for AGES, and didn’t think at all to look at the CSS I had inserted some time ago. It is a lesson learnt (with a red face!). Thanks also for the CSS code should I need to use similar in the future. Knowing more now about how the GenerateBlocks work, I will stick to using them as much as possible for positioning. Thanks again 🙂

[Leo]

No problem 🙂

[Author]

Posts