Image displays within large container

  • navyspitfire

    (@navyspitfire)


    8 years ago

    I am trying to get an image to popup and scale down proportionally. Literally, I just want the image to appear. The width of the .ig_pop is set to 58% by default so it adds a lot of extra whitespace. If I change the width to reduce it to the image width, (36%), then on mobile the image will appear tiny. And if I change the width to 100%, so on mobile the popup looks good, then the .ig_pop white background is full width on desktop and thus doesn’t allow the user to click on the side of the image to close it, only above or below. See screenshots below

    Screenshot – top image is width 100%; user can click on white to close. Bottom image is width set to just the image width; since the % is 36, on mobile, the image will appear tiny.

Viewing 1 replies (of 1 total)
  • Plugin Author Icegram

    (@icegram)

    Hi,

    You do not need to change width of the popup, it will affect the responsiveness.

    I assume, you need to add only image in the Icegram message.
    Please add below css in Icegram message > Custom Code > CSS area.

    #ig_this_message .ig_message{
    padding: 0;
    margin: 0;
}
#ig_this_message .ig_message img{     
   display: block;
    width: 100%;
    margin: 0;
    float: none; 
}

    Let me know, if you are facing any issues.
    Please provide us the link to the page, it will helps us to fix the issue.

    I hope this helps.

    Thanks,
    Team Icegram.

    • This reply was modified 8 years ago by Icegram.
Viewing 1 replies (of 1 total)
  • The topic ‘Image displays within large container’ is closed to new replies.