Can Bootstrap switch to URL at media breakpoint?

Forum|Forum|10 years ago
October 26, 2015
2 replies
829 views

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!

This topic has been closed for replies.

A

Anonymous

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

David_Powers

Inspiring

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.

K

kpmiAuthor

Known Participant

Thanks so much, David.

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

David_Powers

Inspiring

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded