Decentralize marker in map on contact page

1omegazip

Is there a way to decentralize the marker in the map on the contact page? As you can see from uploaded schreenshots, in the screen size that is a little bit wider than very small, the marker is hidden behind the blue info rectangle.

saguaros

1omegazip

It belongs to the map and there is no option to configure it for now.

But it looks fine in desktop now though

1omegazip

Yes saguaros , but as you can see here the marker is hidden in a specific schreensize:
http://mobiletest.me/ipad_mini_emulator/?u=http://www.inoltrepo.com/immo

I found a solution by changing the max-width in the following css code into max-width: 300px;
But I would like to apply this only the specific screensize. How to acheive this? When I add
@media(max-width:800px)and(min-width:768px)
it doesn't work.

.plain-style .group-item .wrap-content {
    background: #002855;
    color: #ffffff;
    max-width: 450px;
    padding: 36px;
    position: relative;
    z-index: 1000;
}

saguaros

1omegazip

You can try this:

@media (min-width: 768px) and (max-width:800px) {
.plain-style .group-item .wrap-content {
  max-width: 300px;
}
}

1omegazip

Thank you saguaros!

It works with your code, but in a specific schreensize the marker was still hidden.
I put the following code and it seems to work perfect:
@media (min-width: 768px) and (max-width:1000px) { .plain-style .group-item .wrap-content { max-width: 300px; } }

saguaros

1omegazip Yes, you can simply change the media queries as you wish.