Image and info box width

  • Resolved PATRICK SAWERS

    (@patrickdps)


    8 months, 4 weeks ago

    Hi! Great plug in! So thank you!

    I am trying to increase the width of the info box on the left and decrease the main interactive image % width. I have followed your instructions carefully, using the following CSS code that you have posted on your own support page (some of the elements don’t paste here), but the image size isn’t reducing. I have checked again that I have the right image id and have reduced the min-width, but still nothing.

    @media (min-width: 900px) { hotspot-{ID}.layout-left .hotspots-image-container, hotspot-{ID}.layout-right .hotspots-image-container {

    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    } hotspot-{ID}.layout-left .hotspots-placeholder, hotspot-{ID}.layout-right .hotspots-placeholder {

    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    }
    }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Natalie G

    (@nataliegarza011)

    Hello Patrick,

    Thanks for reaching out and sharing your question! It looks like the ID was missing to target your image, could you try the following code snippet:

    @media screen and (min-width: 900px) { 
    #hotspot-4971.layout-left .hotspots-image-container, 
    #hotspot-4971.layout-right .hotspots-image-container {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
} 
    #hotspot-4971.layout-left .hotspots-placeholder, 
    #hotspot-4971.layout-right .hotspots-placeholder {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
};

    Let me know if that works ??
    Natalie G

    Thread Starter PATRICK SAWERS

    (@patrickdps)

    Hi Natalie!

    Yes, it works fine! I was sure I had the right ID number in!

    Thanks very much! Lovely plugin!

    Come and sail with us!

    Patrick

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image and info box width’ is closed to new replies.