Google Maps Alignment Issue (only on mobile)

  • Resolved off2roam

    (@off2roam)


    1 year ago

    Generally, on each blog post, i insert a 2-column layout. On the left, I insert a Google maps html code and on the right I insert an image.

    Now i had to do a lot of playing around with this code to get the margins correct on desktop and tablet. But on mobile, there is still a weird left alignment issue of a few pixels.

    I’d really appreciate any advice on how to resolve.

    tablet screenshot: https://imgur.com/a/RtOI6oy

    mobile screenshot: https://imgur.com/cIywuz9

    code below:

    <iframe src="https://www.google.com/maps/d/u/2/embed?mid=1Ax53V4Um3tRmviqxGjPM3z04emrjZ-c&ehbc=2E312F" width="380" height="540"></iframe>

     

     

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Takashi Irie

    (@iamtakashi)

    11 months, 3 weeks ago

    @off2roam, I assume you use a custom HTML block to embed the iframe. I’d advise using a plugin that lets you add Google Maps, but adding the following style rule would make the map responds better on small screens. You can add it in “Additional CSS”. You can find it by going to Appearance > Customize > Additional CSS.

    iframe {max-width: 100%;}

    Thread Starter off2roam

    (@off2roam)

    11 months, 3 weeks ago

    Thank you so much! That fixed the issue!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Google Maps Alignment Issue (only on mobile)’ is closed to new replies.