Map “float to right” and size dependent

  • Resolved glujaz

    (@glujaz)


    6 years ago

    Hello, here comes the annoying guy again ! ??

    Most of OSM is perfectly integrated. I still have (don’t count the other active topics…) a problem left to solve.

    And that is, showing the map of an event or location on a mobile device.
    I really like the “floating” on the right aspect of the map appearing on a desktop, switching to the top of everything on a mobile device.
    Though, The map is to large on the phone, making the page side scrollable.
    Using a pourcentage makes the map disappear (that’s logic) and using the advice given in the FAQ switches the map from floating to going to the top on any plateform.

    Any idea on how to solve that ?

    Thanks ??

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Stonehenge Creations

    (@duisterdenhaag)

    That can be done with css. Anything on your website you want to style a certain way, you do that in your stylesheet. ??

    There are many, many good articles on the web about that.

    To give you a simple idea:
    to make the map fill the screen width on mobile only, you could something like this:

    @media screen and (max-width:650px) {
    .em-osm-container {
        display: block;
        width: 100%;
        max-height: 300px;
        padding: 10px 0;
    }
}

    This is just a simple example, though.

    Thread Starter glujaz

    (@glujaz)

    Ok, I wasn’t very present lately, my bad…

    I tried your code, but it did nothing. And honestly, I’ll leave it as is for now. It’s not our main attraction ??

    The thing is, I’m not a code expert. I stay on editing files with nano or maybe vim, but that’s all !

    Thanks anyway ^^

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Map “float to right” and size dependent’ is closed to new replies.