Instagram embeding

[sapphire]

Hi

I have been embedding Instagram in posts on my website (funweshare.co.il)
However, I recently went live and noticed that for some reason on mobile - The Instagram embedded looks funny - it does not centralize even when I choose that option when editing post. Would be happy to send a photo so you could see how it is not in the middle and looks funny. Would be happy to see how this can be fixed. (only happened on actual mobile and not on

Also wondering regarding the full-width option for posts. I tried to use it in the post settings but nothing happened, would be happy to get rid of the container in mobile.

Thank you in advance for your reply, your help is much appreciated!

[lely]

Hello @sapphire,

This is what I am seeing regarding instagram icon on your site:

To center Follow Us text and instagram icon, try adding this custom CSS on Theme Options > Global CSS.

@media(max-width: 480px){
.rtl ul:not(.x-nav):not(.x-comments-list):not(.products), .rtl ol:not(.x-nav):not(.x-comments-list):not(.products),
div#zoom-social-icons-widget-3 h4 {
    text-align: center;
    border: 0; /*This line is in case you want to remove the border. Remove this if not needed*/
} 
/*To get rid of container on mobile view for single post, also try this */
.single-post .x-container.max.width.offset {
    width: 100%;
    margin-top: 0;
}
}

See how suggested CSS is inside media query.

Hope this helps.

[sapphire]

Hi Lely,

Thank you but I wasn’t talking about the icon.
I was talking about an embedment of an Instagram post in a blog post
For example this post
looks bad on my mobile phone.

[sapphire]

I just tried the CSS code and it is not working, post is still not fullwidth.
Also does not change when I click the Fullwidth post layout checkbox …

[lely]

Hello @sapphire,

I can see you have added the CSS on wrong location. Please remove it from body class textfield and on other location you have added it. Please use this updated CSS and then add it here: Admin > X > THeme Options > Global CSS

@media(max-width: 480px){
.single-post .x-container.max.width.offset {
    width: 100%;
    margin-top: 0;
}
.wp-block-embed__wrapper iframe {
    border: none !important;
}
}

That CSS will solve the instagram issue as well. Hope this helps.

[sapphire]

Thank you for your help! that worked

[ruenel]

You are most welcome!