Lowered h2 title for desktop, but phone is not positioned well

  • Resolved sbstarr

    (@sbstarr)


    2 years ago

    I used a snippet of CSS to lower the h2 titles on my Draw Attention map like this:
    .layout-left .hotspots-placeholder { margin-top: 400px; }

    It’s not viewing properly on mobile however. Can you suggest a CSS snippet I could use to raise the h2 title in mobile view?

    A droplr video demonstrating my question: https://d.pr/v/ZjAjsL

    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 @sbstarr

    Thanks for reaching out! It seems like you need a few adjustments to the CSS you’re using so that the margin only applies to the desktop versions of the image map.

    Could you try the following CSS instead?

    
@media only screen and (min-width: 1200px) {
.layout-left .hotspots-placeholder { margin-top: 400px; }
}

    And, if you want this to apply to tablets too, you can just swap the 1200px for 768px. (Or, whatever screen breakpoint you’d like)

    Let me know if that helps ?? BTW thank you so much for the video demonstration, it was very helpful!

    Thread Starter sbstarr

    (@sbstarr)

    This is spot on for all devices Natalie… thank you! (I used the 768px breakpoint.) I’m SO rusty with CSS, I would not have come up with that.

    Yes droplr videos are so worth it for me. I do a lot of design/development and it’s an easier way to ask a question. ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Lowered h2 title for desktop, but phone is not positioned well’ is closed to new replies.