Centering an image only on mobile with advanced image settings to add new class

flsrl · Member · Jul 7, 2020 at 8:13 am
Copy link

Add topic to favorites
Good morning,
I need help with centering an image only on mobile. This image is aligned right on computer (and that is what I want), but I would like to change its size and alignment to center alignment only on mobile.

I have already tried using custom css like so:

@media only screen and (max-width: 767px){
.wp-block-image img {
display: inline-block;
vertical-align: middle;
}
.wp-block-image img {
position: relative;
display: block;
width: 45%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
}

…and it worked.
The problem is that .wp-block-image img is also the name of another sets of image on my homepage, and those change too.
I have tried adding a new class (.customimage, and then changing my custom css to .wp-block-image img .customimage to change the alignment) on the advanced image settings on the wordpress page editor, but it did not center the alignment on mobile.

What am I missing? I am new to this, so my technical vocabulary is limited.
Thank you very much for your help.
supernovia · Staff · Jul 7, 2020 at 11:17 pm
Copy link
Hi there, if you just call it by .customimage does it work well for you? Also, could you send a link to the site you’re having trouble with?

Please note these forums are for the sites hosted and managed here at WordPress.com. For help with a site hosted somewhere else, you’ll need to use the forums for self-managed WordPress installations instead.

WordPress.com vs. WordPress.org
flsrl · Member · Jul 8, 2020 at 8:58 am
Copy link
Hello!
Wow, it was that simple! I did as you suggested and it worked perfectly.

Sorry for posting on the wrong support website and thank you for explaining so nicely.

Hope you have a great day!
supernovia · Staff · Jul 8, 2020 at 2:51 pm
Copy link
No problem at all. Have a great day there, too!

No items found.