Display content on mobile or desktop only

New Member
4 0 0

Hello,

I am having issues separating mobile and desktop content from each other. I am using free template called: Simple

I have added following to: theme.scss.liquid

    //medium+ screen sizes
    @media only screen and (min-width:992px) {
        .desktop-only {
            display:block !important;
        }
    }

    //small screen sizes
    @media only screen and (max-width: 991px) {
        .mobile-only {
            display:block !important;
        }

        .desktop-only {
            display:none !important;
        }
    }

Then I have added class="mobile-only" to the section that I would like to hide as seen below:

<section class="upper" class="mobile-only">

        <!--START NAV-->
        <div class="three columns ">
          <nav>
            <h2>{{ linklists[settings.secondary_menu].title }}</h2>
            {% for link in linklists[settings.secondary_menu].links %}
              <a href="{{ link.url }}">{{ link.title }}</a> {% unless forloop.last %}<br>{% endunless %}
            {% endfor %}
          </nav>
        </div>
        <!--END NAV-->

        <!--START PAGE CONTENT-->
        <div class="eight offset-by-one columns">
          <div id="footer-content">
            {% if settings.footer_page == blank %}
            {% else %}
            <!--<h2>{{ pages[settings.footer_page].title }}</h2>-->
            <div>{{ pages[settings.footer_page].content }}</div>
            {% endif %}
            {% if settings.show_signup_form %}{% include 'credit-cards' %}{% endif %}
          </div>
        </div>
        <!--END PAGE CONTENT-->
 
        <!--START MAILING LIST / OR CREDIT CARDS-->
        <div class="three columns offset-by-one">
          {% if settings.show_signup_form %}
          <div id="mailing-list">
            <h2>Mailing List</h2>
            {% if settings.mailchimp_form_action.size > 0 %}
            <form action="{{ settings.mailchimp_form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
              <label>Your Email Address</label>
              <input type="email" placeholder="you@email.com" name="EMAIL" id="email-input" />
              <input type="submit" value="Sign Up" id="email-submit" />
            </form>
            {% else %}
              <form id="email-alerts-footer" class="mailing-list" action="/contact" method="post">
                <input type="hidden" value="customer" name="form_type">  
                <span class="success"><em>Thank you for signing up!</em></span>
                <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,mailing-list" />
                <input type="hidden" id="mailinglist-first-name" name="contact[first_name]" value="Subscriber" />
                <input type="hidden" id="mailinglist-last-name" name="contact[last_name]" value="Mailing List" />
                <label>Your Email Address</label>
                <input type="email" placeholder="you@email.com" name="contact[email]" id="email-input" class="required email" />
                <input type="submit" value="Sign Up" class="button secondary" name="subscribe" id="email-submit" />
              </form>
            {% endif %}
          </div>
          {% else %}
          {% include 'credit-cards' %}
          {% endif %}
        </div>
        <!--END MAILING LIST / CREDIT CARDS-->

        <br class="clear">
      </section>

It still shows that section on both mobile and desktop. Am I missing anything here? Please kindly help.

0 Likes
Shopify Expert
159 0 22

You haven't added the display none for mobile-only to your first media query:

    //medium+ screen sizes
    @media only screen and (min-width:992px) {
        .mobile-only {
            display:none !important;
        }

        .desktop-only {
            display:block !important;
        }
    }

    //small screen sizes
    @media only screen and (max-width: 991px) {
        .mobile-only {
            display:block !important;
        }

        .desktop-only {
            display:none !important;
        }
    }

 

Developer for Pixel Union
0 Likes
New Member
4 0 0

Hello,

Thanks for your response. I have edited the media query as you stated. Still no difference. Section shows on both mobile and desktop.

Thanks,

0 Likes
Shopify Expert
9965 84 1467

Seeing only part of the css means that there could still be style conflicts not seen. Consider posting a link to the storefront so it can be seen in action -- it's far easier to troubleshoot that way.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
4 0 0

I actually was able to fix it this way just now:

/* Custom CSS */
	
    //medium+ screen sizes
    @media screen and (min-width:992px) {
        #mobile-only {
            display:none !important;
        }

        #desktop-only {
            display:block !important;
        }
    }

    //small screen sizes
    @media screen and (max-width: 991px) {
        #mobile-only {
            display:block !important;
        }

        #desktop-only {
            display:none !important;
        }
    }

And I have used id tag within the section. That seems to fixed it. It works now. Thanks for all the help.

0 Likes
Shopify Staff
Shopify Staff
5826 0 272

That's a lot of !important statements, and use of #id.

Here is what I always use with success, should anyone stumble on this:

@media (max-width: 479px) {
  .show-on-desktop, .show-on-tablets, .hide-on-mobile { display: none; }
}
@media (min-width: 480px) and (max-width: 979px) {
  .show-on-desktop, .hide-on-tablets, .show-on-mobile { display: none; }
}
@media (min-width: 980px) {
  .hide-on-desktop, .show-on-tablets, .show-on-mobile { display: none; }
}

 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Excursionist
60 0 3

Hi Caroline & co.

I'm trying to implement this but I'm at a real low level at coding...

I have to add that piece to the stylesheet and then, add class to the element that I want to show/not to show? Something like:

<a href="www.yoyo.com"; class="hide-on-desktop">hello</a>

something like that?

 

thanks in advance, you'll help me a lot with this!

Marcel

0 Likes
Astronaut
1925 0 375

@Marcel:  Make sure that the semi-colon (;) is not there.  (I believe the Shopify forum is automatically adding it to your post for no good reason.)  That should be good.

0 Likes
Excursionist
60 0 3

Hi Alex!

yes, that semi-colon there was an error... I wrote that message too fast =)

Well, I finally made it work changing the min-with for 'hide-in-desktop' to 1025px, I think this has some connection with the width of my container... but it works as I wanted

 

thanks!

0 Likes
New Member
11 0 0

Hi there:)

How do you write the class if you want to hide an object on both mobiles and tabelts?

Is it just class="hide-on-mobile","hide-on-tablets"

Or how is it done:)...?

0 Likes