Trying to centre image on mobile only CSS not working

[rystaman]

Hi,

I’m trying to centre align the first image on this page on a mobile device - http://staging.dwanedigital.co.uk/web-design/

I have marginless columns turned on so I have added some space to the left-margin.

I have tried this custom element CSS to remove this margin on a mobile device but it doesn’t appear to be working for me.

/* Mobile Center Align */

@media only screen and (max-width: 767px) {

$el {

display: inline !important;
margin-left: auto !important;
margin-right: auto !important;
}

}

Thanks!

[jade]

Hey Ryan,

Please try this code:

@media (max-width: 767px) {

    $el.x-image {
        margin: 0 !important;
        display: block;
        text-align: center;
    }

    $el.x-image img {
        display: none;
    }
}

Hope this helps.

[rystaman]

@Jade

@media (max-width: 767px) {

$el.x-image {
    margin: 0 !important;
    display: block;
    text-align: center;
}

$el.x-image img {
    display: none;
}

}

Hi Jade,

That still doesn’t centre the image, and

 $el.x-image img {
    display: none;
}

removes the image rather than centre it.

This is how it looks still (it’s actually further over to the left now):

Thanks

[rad]

Hi Ryan,

Please change your CSS to this

@media only screen and (max-width: 767px) {

$el {
margin-left: auto !important;
margin-right: auto !important;
}

}

Your CSS is almost correct due to inline display. The left and right auto margin only works for block or inline-block. And since image element is an inline-block element then there is no need to change it.

Hope this helps.

[rystaman]

Hi Rad,

That CSS didn’t work either

and i’m not sure why.

However I clicked the centre text align option for the column the image was in and it worked. How come the CSS didn’t work but the centre align column worked? Is it a bug?

[rad]

Hi Ryan,

I checked the page source code and no similar CSS that is added. I’m not sure how it’s added, but the reason it’s not working is that it’s not there. It could be due to cache since you have active cache plugin

But glad it’s working now with column alignment, it should work as well since the alignment is set on the parent container.

Thanks!