Different button options for desktop and mobile

Wishlist Pricing Table
1

Hi,

I had a bit of a look here and can’t find that this has been requested before, but it would be good to have the option for the buttons to do different things depending on whether the user is on mobile or desktop.

For example, I have a ‘Book Now’ button, which I’m using my phone number as the button link, but obviously this isn’t good for desktop and I’d like desktop users to be taken to a booking form, email etc.

Is this possible?

2 Likes
2

Hi @Pete5, thanks a lot for sharing your use case here!

Yes, I’m afraid we don’t have a solution to support this idea, but it sounds like a great feature. Let’s see what other community members think about it :slight_smile:

1 Like
3

Hi @Pete5

This workaround should help until the desired result is implemented.

Maybe you can use it. Just insert a dummy function in your column.

grafik
grafik735×798 96.4 KB

Add this in the code editor

grafik
grafik365×185 3.35 KB

grafik
grafik358×171 3.62 KB

<!-- fon -->
<a href="tel:+49123456789" class="btn btn-call btn-mobile"> call</a>
<!-- Desktop: Webform -->
<a href="/contakt-form" class="btn btn-call btn-desktop"> contact form</a>

Add this in the Custom CSS Field

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #197bff;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* hide Desktop */
.btn-desktop {
  display: none;
}

/* hide Mobile */
@media (min-width: 768px) {
  .btn-mobile {
    display: none;
  }

  .btn-desktop {
    display: inline-flex;
  }
}

Just make it look nicer a bit and it should work.

2 Likes
4

Thanks Sina, I’ll try it!

1 Like