Mobile/Tablet CSS Center Image

This topic has 8 replies, 2 voices, and was last updated 2 years, 7 months ago by WASIPLtd_Website.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
May 4, 2022 at 6:02 pm #373066

WASIPLtd_Website
Participant

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.

May 5, 2022 at 9:59 am #373200
Bogdan Donovan
Keymaster
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
May 5, 2022 at 3:57 pm #373385

WASIPLtd_Website
Participant

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.

May 5, 2022 at 4:13 pm #373389

Bogdan Donovan
Keymaster

Hi,

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

Kind Regards

May 7, 2022 at 12:07 am #373810

WASIPLtd_Website
Participant

Hi Bogdan,

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

Thanks.

May 9, 2022 at 9:14 am #374147

Bogdan Donovan
Keymaster

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

May 9, 2022 at 12:20 pm #374216

WASIPLtd_Website
Participant

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?

May 9, 2022 at 3:55 pm #374296

Bogdan Donovan
Keymaster

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

May 9, 2022 at 4:01 pm #374297

WASIPLtd_Website
Participant

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

Posts