Aligning two pictures in the center in small screens (responsive mode)

Activello
1

Hi - I’m new to the WP world, so please excuse my very elementary questions!

So I have two landscape pictures lined up side-by-side on the website. It looks fine on a website (img: big screen), but when I view it in my mobile (img: small screen), the two pictures – which will now be displayed in two rows, one image per row, which is perfectly fine – but they don’t quite align in the center of the screen, and there isn’t have any space between the two pictures. Ideally I would like the two pictures be aligned and centered in the middle of the screen, and there to be some white space between the two pictures. Is there a quick fix to that?

Thanks in advance for your help!

2

HI @fiosphere,

I hope you are well today and thank you for your question.

Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?

Best Regards,
Movin

3

http://fiosphere.co/2017-greece-day-0

It displays well on a big screen, but if you reduce the screen size to like a mobile phone, you will see what I mean. Thanks Movin!

4

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

@media (max-width: 767px){
article img.alignnone {
    float: none;
    margin: 5px auto;
}
}
5

Thank you Movin! Is there a way to make sure it’s centered? In some screens the two pictures (if same size) are centered, sometimes it’s 1-2 pixels off. Not a big deal at all, but just wondering if there is a line or two of codes that can align them. Thanks!

6

You are most welcome here :slight_smile:

I don’t see that space issue so it’s hard for me to resolve it.