I’ve having some alignment issues with images when viewed on mobile devices. I have the images set to center align, but when viewed on mobile devices they left align. I’m using the SiteOrigin Image widget. I’ve tried Googling for solutions but nothing seems to work, and it’s slowly driving me crazy. My company has a dedicated developer we use, and even he is struggling to find a solution. I’m more than happy to share the URL of a page where this occurring.
Thanks,
Pete
Hi Pete,
Do you have a public URL where we can take a look at what’s going on?
Sure thing. You can see it happening here: http://www.teklinks.com/about-main/.
You can observe the icons going from center-align to left-align anytime you shrink the window or view the page on mobile device. It also does it in live editor when viewing the page as a tablet or phone.
Thanks so much.
Hi Pete,
I just tried to view the linked website but it’s coming up as missing. Is that the correct URL? Sorry about this!
Sorry about that, I’m not sure why it’s not showing up for you. I clicked the link and it worked for me. Here are some other pages where it’s happening. They are all set to “public” so hopefully they’ll pull up for you.
http://www.teklinks.com/cloud/
http://www.teklinks.com/industries/finance/
Hi Pete,
Thank you for that. I was able to view the issue and work out what’s going. Basically, your theme is preventing them from being centered on mobile devices. To override your theme for this widget you’ll need to use some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Please add the following CSS:
#content img.so-widget-image { display: inline-block; }How does that look?
You might also need to install the SiteOrigin CSS Editor.