Mobile/Tablet CSS Center Image

Could you please assist me with CSS code to center this image on mobile and tablet: https://gyazo.com/8fc87b0404d47ac2c55cec921b261377

Link to page in private content.

Thanks.

Hi,

First, add a custom class to the desired element “image-mobile-center” (https://prnt.sc/G8wvGLCHIYbt) and then try to add the following code snippet to the Custom CSS area in Theme Settings.

@media (max-width: 1024px) {
.image-mobile-center .wd-image {
	text-align: center !important; 
}
}

Kind Regards

Thanks very much Bogdan! This worked great for mobile.

Could you please let me know if the CSS code provided will also work for tablet viewing?

Thanks.

Hi,

Yes. This code will start to work from screen width 1024px and lower which is considered by Elementor builder as Tablet.

Kind Regards

Hi Bogdan,

Thanks for your assistance. However, the image is still not centring on tablets. Could you please help me with that?

Thanks.

Hi,

You have inserted the custom class image-mobile-center – with an error (https://prnt.sc/Ix5XB8XcY_Ms).

"image-mobile-center – wrong
image-mobile-center – correct

Insert it correctly and the code will start working

Kind Regards

Is the code you provided me correct?

It literally copied and pasted exactly what you gave me:

@media (max-width: 1024px) {
.image-mobile-center .wd-image {
text-align: center !important;
}
}

Is it supposed to have
}
}

Twice at the end of the CSS code you gave me?

Hi,

The CSS code that we give you is correct, but it starts working only if you correctly insert the custom class image-mobile-center in the image element “CSS Classes field”. You have inserted it with a mistake by adding a quotation mark at the beginning (check the screenshot https://prnt.sc/aFmoXuP0E7vn).

Try to remove the following quotation mark:

"image-mobile-center– wrong
image-mobile-center – correct

After you insert the custom class correctly, provided custom code will start to work.

Kind Regards

Thank you, Bogdan, appreciate you clarifying that for me and informing me of the issue. It should now be fixed.

[Author]

Posts