• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Can Bootstrap switch to URL at media breakpoint?

Explorer ,
Oct 26, 2015 Oct 26, 2015

Copy link to clipboard

Copied

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!

Views

652

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 26, 2015 Oct 26, 2015

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 26, 2015 Oct 26, 2015

Copy link to clipboard

Copied

Thanks so much, David.

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 26, 2015 Oct 26, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 26, 2015 Oct 26, 2015

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 26, 2015 Oct 26, 2015

Copy link to clipboard

Copied

LATEST

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Oct 26, 2015 Oct 26, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines