Can Bootstrap switch to URL at media breakpoint?

[kpmi]

I am caught in a bind with the donation page on our website redesign. Our donation services company has a separate page and URL for their mobile form (which is ridiculous to me).

Is there a way to switch the URL depending on page size with a media css rule? Right now the "Donate Now" button just links to the regular page, which is NOT web friendly.

Site is at new.dunstanwebdesign.com.

Help!

[David_Powers]

You can't switch the URL on a media query. However, you can hide/reveal elements on a media query.

Create separate elements for the Desktop and Mobile versions. Hide the Desktop element on Mobile devices, and vice versa.

[kpmi]

Thanks so much, David.

I'm new to Bootstrap -- what would coding for that look like?

[David_Powers]

Just apply the .hidden-* class to the elements that you want hidden.

For example, if the different button needs to be displayed only on what Bootstrap calls "extra-small" devices, apply the .hidden-sm, .hidden-md, and .hidden-lg classes to that button or to its parent element. Then apply the .hidden-xs class to the button or parent element that needs to be hideen on extra-small devices.

If you're using Dreamweaver CC 2015 to create your Bootstrap layout, you can right-click the element, and select Hide Element from the context menu. Dreamweaver Help | Working with Bootstrap files

[kpmi]

Except that it’s our Donate Button, and I can’t hide that since we’re a non-profit!

Can I hide the button on small devices and show another one with a different link?

[David_Powers]

kpmi wrote:

Can I hide the button on small devices and show another one with a different link?

Yes, that's exactly what I'm suggesting.

<button class="hidden-xs">Main donation button</button>

<button class="hidden-sm hidden-md hidden-lg">Button with link to mobile donation page</button>

[Guest]

It's not possible to redirect a user to a separate page using css media queries. However, you can redirect a user to a different page based on viewport size by using javascript.

best,

Shocker