Instagram Widget Mobile

Activello
1

Hi,

I am trying to centre organise my instagram feed on my homepage when viewing in mobile and ipad. On mobile the images all appear on the left side whilst i want them to be in the centre and on ipad they are all clustered together. I have tried using the below code which makes the image larger but doesn’t centre it. This also only works on mobile. Can you advise how I can centre it on mobile and what max-width to use for ipad?

@media (max-width: 768px) {
#null-instagram-feed-3 img {
display: block;
margin: auto;
width: 250px;
height: auto;
}
}

Thanks,

2

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

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 -> Additional CSS

@media (max-width: 550px){
 ul.instagram-pics.instagram-size-thumbnail {
    text-align: center !important;
    margin: auto;
    display: grid;
}
#null-instagram-feed-3 ul {
    display: grid;
}
}

Best Regards,
Support

3

Hi,

Weirdly it works when I use my desktop inspect element and view in mobile format however when I try it on my actual mobile and ipad nothing has changed. Is there something else I could try?

Thanks

4

Hey there,

Thank you for replying with that information,

For the code try adding the !important rule to each line of code.

@media (max-width: 550px){
ul.instagram-pics.instagram-size-thumbnail {
text-align: center !important;
margin: auto !important;
display: grid !important;
}
#null-instagram-feed-3 ul {
display: grid !important ;
}
}

Let me know if this works for you.

Best regards,
Support.

5

Hi,
This doesn’t work either on my mobile but works in inspect element on the desktop. Is there anything else I could try?
Thanks,

6

Hey there,

Thank you for keeping in touch.

I’m going to ask you to add the following code to the actually style.css of the theme file.
I assume you’re using the child theme. If you aren’t I’ll advise you to install and activate the child theme right away.
Also make a back up of your website before making this change.
Once you’ve done this, simply using ur FTP application to navigate to the theme file edit the style.css in the child theme
wp-content > themes > activello-child > style.css and paste the code that was given.

Best regards,
Support.