Using CSS to resize width

  • Resolved clembiria

    (@clembiria)


    4 years, 7 months ago

    Hello,

    I use wp mapit but I need to resize the width of the the maps for mobile devices.

    I have like 20 maps on my website, is there a single CSS to target all wp mapit maps so I can integrate it my media queries? I don’t want to copy each id for each map to apply the CSS…

    Thank you for your help!

    Clément

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Chandni Patel

    (@phpwebdev)

    Hello Clément,

    You can use classes wp_mapit_map (for single pin map) and wp_mapit_multipin_map (for multipin map).

    Hope this helps.

    Please let me know if you have any other questions.

    Regards,
    Chandni

    Plugin Author Chandni Patel

    (@phpwebdev)

    Hello Clément,

    I am marking this as complete. Please let me know if you have any other issues.

    Regards,
    Chandni

    Thread Starter clembiria

    (@clembiria)

    Hi,

    Thanks for your reply!

    It works to target all my maps with wp_mapit_multipin_map.

    Thought, I still cannot reduce the width on mobile devices.

    I applied the following CSS:

    @media only screen and (max-width: 600px) {
    .wp_mapit_multipin_map {
    width: 100%;
    }
    }

    I even reduced the % but it has no effect. Just te be sure I correctly target the maps I used display:none instead of width:100% and all the maps disappear. Obviously I can’t send a screenshot here but the maps are larger than the size on a mobile device.

    Clément

    Plugin Author Chandni Patel

    (@phpwebdev)

    Hello Clément,

    Please try

    .wp_mapit_multipin_map {
    width: 100% !important;
    min-width: 0 !important;
    }

    let me know if this helps.

    Regards,
    Chandni

    Thread Starter clembiria

    (@clembiria)

    Great, it works now!

    Many thanks for your help,

    Clément

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Using CSS to resize width’ is closed to new replies.