Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 21, 2022 at 7:22 pm #1369760
    santon82

    Hello Enfold Team,

    I have an issue and I hope you can help me. On the mobile version of my website mentioned below at the beginning of in the media section, there is a plug in for my Instagram, the videos are displayed in small boxes with a big play sign, unfortunately. The play sign button actually differentiates between video and image but the play sign is so big that it is covering almost the full box (I am using an iPhone, but with a Samsung the problem is other as well). My Webdesigner advised me to contact you for this issue as it does not look nice. He said that you can help me reducing the size of the sign because It is generated automatically (by default) from the plugin by Enfold.
    Would you please take a look and let me know ?

    I appreciate a quick turnaround.
    Best regards, Elie

    October 22, 2022 at 2:38 pm #1369796
    Mike

    Hey Elie,
    Thanks for the link to your site, on mobile I believe you are referring to these “play” icons:
    2022-10-22_004.png
    these are added by your Instagram plugin and not the Enfold theme, but this CSS should make them much smaller on mobile, try adding to the Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
#sb_instagram #sbi_images svg:not(:root).svg-inline--fa {
    height: 0.4em;
}
#sb_instagram #sbi_images .sbi_type_video .sbi_playbtn {
    margin-top: -12px;
    margin-left: -8px;
}
}

    After applying the css, please clear your browser cache and check.
    Please see the expected results screenshot in the Private Content area.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.