[Resolved] Link on image for the pop-up content on map not working on mobile

[Author]

Posts

[eloiseT]

I'd like to improve how the pop-ups on my maps look on mobile. They work fine on desktop computers, but the display on mobiles isn't user-friendly at all.
One of the main issues is that the link on the image doesn't work on mobile (it works on desktop computers), and many visitors won't scroll to open the other links.
Plus, there's also a big white space under the image on mobile so sometimes visitors don't even notice they can scroll, and I cannot find a way to reduce the empty space.

Website: hidden link
You can find a map here, for example: hidden link

[Christopher Amirian]

Hi there,

There is a reason that the item in the mobile view is in a stacked way. Because int he 2-column mode it will not have enough space to accommodate the whole content.

Here is the CSS code that you can use to keep the 2 column view for mobile, but inconsistencies may occur:

@media (max-width: 781px) {
    .gm-style-iw-d .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis:100%!important
    }
}

@media (min-width: 782px) {
    .gm-style-iw-d .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis:0%;
        flex-grow: 1
    }

    .gm-style-iw-d .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
        flex-grow: 0
    }
}

@media (min-width: 782px) {
    .gm-style-iw-d .wp-block-columns {
        flex-wrap:nowrap!important
    }
}


.gm-style-iw-d .wp-block-columns {
    flex-wrap: nowrap!important;
}


.gm-style-iw-d .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 0%;
    flex-grow: 1;

.gm-style-iw-d .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
    flex-grow: 0;
}

.gm-style-iw-d .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis:0%;
    flex-grow: 1
}

.gm-style-iw-d .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
    flex-grow: 0
}

Thanks.

[eloiseT]

Hi Christopher,
Thank you for your help. I understand why the mobile view is stacked, and I'm not trying to have the mobile view in two columns, sorry if my initial message was unclear.

I'd like the photo to be clickable on mobile (it is clickable on desktop at the moment but not on mobile, and I don't know why). And if possible, I'd like to reduce the white space between the image and the post title on mobile.

Thanks!
Eloise.

[Christopher Amirian]

Hi there,

I checked and there is no link on the image even on the desktop.

Is it maybe a logged-in-out issue? Would you please check with the incognito window and see if you see the same thing?

I could not see any links on the image even on a desktop.

Maybe if you give me the login information by setting the next reply as private and give me the instructions on where you added the map and the pop up ones so I can see if there is an issue on the backend in the way you used the Toolset Image block?

Thanks.

[Christopher Amirian]

Hi there,

Thanks I checked and the issue is in the P tag you used inside the column which shows the Image. The P tag has a margin in your theme and it pushes stuff further down.

Instead I used a simple DIV HTML element and it fixed the issue.

By the way now I can click on the image in the incognito browser window. Please make sure that you clear your browser cache or mobile browser cache and also beforehand clear the WP Rocket cache,

Thanks.