Announcement

Collapse
No announcement yet.

Hide/Show Content on Mobile/Desktop

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • obleck
    replied
    I'm a newbie here and found this thread searching for answers to a similar question. FWIW there is a "show-mobile" and "hidden-mobile" class built into at least some templates, which accomplish this same thing.

    Happy coding!

    Leave a comment:


  • esbalabs
    replied
    PROBLEM SOLVED! Thank you so much Geronimo from 3dcart!

    I feel sheepish but must confess I was missing a bracket on my code!!!! Cant believe I did not see it by myself...or remember when I deleted it.
    But this works:

    @media only screen and (max-width:767px){
    .hidden-mobile {
    visibility: hidden !important; display: none !important;
    }
    }
    @media only screen and (min-width: 768px){
    .hidden-desktop {

    display: none ;
    }
    }

    Thanks again and happy coding!
    Estela

    Leave a comment:


  • esbalabs
    replied
    I have put in a ticket with 3dcart but I am afraid this will say it is a design issue and to hire one of their developers- wish I could, but currently no $$$ for that luxury...:)

    Since I posted, I modified a little and still no results:

    I have been working all weekend on Black Friday sales banners. One I would like to show on desktop, the other on mobile. I created the classes 'hidden-mobile' and 'hidden-desktop' as follows:

    @media only screen and (max-width:767px){
    .hidden-mobile {
    visibility: hidden !important; display: none !important;

    }
    @media only screen and (min-width:768px){
    .hidden-desktop {
    visibility: hidden !important;
    display: none !important;
    }

    The classes worked great on SATURDAY AND ON SUNDAY UNTIL 4 PM, then, the class 'hidden-desktop' stopped working and now it shows in desktop in all browsers. I cleared the Cache and did CTL plus Shift plus R but no luck. The 'hidden-mobile' works thoughwhich is good.

    The code I am using on the Global Header (Content>Header and Footer) is this:

    <div class='hidden-desktop'><a href='https://www.esbalabs.com' title='ESBA Labs - Home' style='text-transform: none;'>
    <h3>ESBA Laboratories Inc.</h3></a> <! --THIS STILL SHOWS IN DESKTOP!!!!-->

    <div class='hidden-mobile'>
    <div class='floating-box-global'><a href='https://www.esbalabs.com'><img src='/assets/images/Logo/Logo-ESBA-Labs-x45x40.jpg' align='left' border='0px' style='margin-right: 10px;' /></a>
    <div class='store-nameEB-desktop'><a href='https://www.esbalabs.com'>ESBA Laboratories Inc.</a></div></div>
    <div class='floating-box-global'>
    <!--
    START: FRAME_SEARCH
    -->

    <div id='searchBox' class='hidden-mobile'>
    <form method='get' name='searchForm' action='search.asp'>
    <input type='text' id='searchlight' name='keyword' value='' placeholder='[frame_search]' />
    <input type='submit' name='search' value='' />
    </form></div>
    <!--
    END: FRAME_SEARCH
    -->
    </div></div>
    <div class='hidden-mobile'><a href='view_category.asp?cat=40'><img src='/assets/images/Promos/black-friday-all-week-980x117.jpg' alt='' border='0px' style='margin-bottom: 5px;' /></a></div>

    <div class='hidden-desktop'><a href='view_category.asp?cat=40'><img src='/assets/images/Promos/black-friday-sale-mobile-600x640.jpg' alt='SHOP BLACK FRIDAY GIGANTIC SALE' border='0px' style='margin-bottom: 5px;' /></a></div><!--THIS STILL SHOWS IN DESKTOP AND IS HORRIBLE-->

    PLEASE HELP! I need to understand this!

    Leave a comment:


  • esbalabs
    replied
    Hello! I have been working all weekend on Black Friday sales banners. One I would like to show on desktop, the other on mobile. I followed TangoPixel guides to create the classes "hidden-mobile" and "hidden-desktop" as follows:

    @media(max-width:767px){
    .hidden-mobile {
    visibility: hidden !important; display: none !important;

    }
    @media(min-width:768px){
    .hidden-desktop {
    visibility: hidden !important;
    display: none !important;
    }

    The classes worked great YESTERDAY, and today, until 2 hours ago, then, the class "hidden-desktop" stopped working and now it shows in desktop in all browsers. I cleared the Cache and did CTL plus Shift plus R but no luck.

    The code I am using on the Global Header (Content>Header and Footer) is this:

    <a class="hidden-desktop" href="https://www.esbalabs.com" title="ESBA Labs - Home" style="text-transform: none;">
    <h3>ESBA Laboratories Inc.</h3></a>
    <!--this is the code for the floating boxes used in the frame to hold the ESBA name and logo and the search box-->
    <div class="hidden-mobile">
    <div class="floating-box-global"><a href="https://www.esbalabs.com"><img src="/assets/images/Logo/Logo-ESBA-Labs-x45x40.jpg" align="left" border="0px" style="margin-right: 10px;" /></a>
    <div class="store-nameEB-desktop"><a href="https://www.esbalabs.com">ESBA Laboratories Inc.</a></div></div>
    <div class="floating-box-global">
    <!--START: FRAME_SEARCH-->
    <div id="searchBox" class="hidden-mobile">
    <form method="get" name="searchForm" action="search.asp">
    <input type="text" id="searchlight" name="keyword" value="" placeholder="[frame_search]" />
    <input type="submit" name="search" value="" />
    </form></div>
    <!--END: FRAME_SEARCH-->
    </div></div>
    <div class="hidden-mobile"><a href="view_category.asp?cat=40"><img src="/assets/images/Promos/black-friday-all-week-980x117.jpg" alt="" border="0px" style="margin-bottom: 5px;" /></a></div>
    <div class="hidden-desktop"><a href="view_category.asp?cat=40"><img src="/assets/images/Promos/black-friday-sale-mobile-600x640.jpg" alt="SHOP BLACK FRIDAY GIGANTIC SALE" border="0px" style="margin-bottom: 5px;" /></a></div>

    ________________________________________

    In summary: the hidden-mobile works, but the hidden-desktop does not work now, worked yesterday????

    Help!
    Estela

    Leave a comment:


  • TangoPixel
    replied
    Glad to know that :)

    Leave a comment:


  • Acmeoutfitter
    replied
    Originally posted by cartexpert View Post
    Acmeoutfitter You can hide and display content on different device width easily with CSS. just add the code below to the bottom of your active CSS

    @media(max-width:767px){
    .hidden-mobile{
    display:none;
    }
    }
    @media(min-width:768px){
    .hidden-desktop{
    display:none;
    }
    }

    Any element you want to hide on mobile, just add the class hidden-mobile to that. and any element that you only want to display on the mobile but hidden on larger devices, hidden-desktop will work. After modification, make sure to clear store and browsers cache to see changes.

    Example of hiding a div on mobile is given below. all you need to do is add class to the opening tag.

    <div class="hidden-mobile">

    </div>

    if some class is already there, you can add your class next to that separated by a space like an example below

    <div class="random-class hidden-mobile">

    </div>

    To make your youtube videos responsive on different devices, add your iframe within this div

    <div class="video-responsive">

    </div>

    something like this below.

    <div class="video-responsive">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/7jTq2FXKr0g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

    After that add the following CSS to your active stylesheet.

    .video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    }
    .video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    }

    Clear cache and you good to go. If something doesn't work, Your situation might be different so feel free to PM me the link and I will be happy to help.
    Wow! Thanks. This worked out very well. I haven't tried the youtube code yet. I will try that next, but the hidden-mobile/desktop with the CSS worked out fine. I didn't know i can add the CSS to the header/footer fields in the categories themselves. Awesome? Or is this the wrong way and will I regret it? ha ha ha.
    Last edited by Acmeoutfitter; 03-22-2018, 09:28 AM.

    Leave a comment:


  • TangoPixel
    replied
    Acmeoutfitter You can hide and display content on different device width easily with CSS. just add the code below to the bottom of your active CSS

    @media(max-width:767px){
    .hidden-mobile{
    display:none;
    }
    }
    @media(min-width:768px){
    .hidden-desktop{
    display:none;
    }
    }

    Any element you want to hide on mobile, just add the class hidden-mobile to that. and any element that you only want to display on the mobile but hidden on larger devices, hidden-desktop will work. After modification, make sure to clear store and browsers cache to see changes.

    Example of hiding a div on mobile is given below. all you need to do is add class to the opening tag.

    <div class="hidden-mobile">

    </div>

    if some class is already there, you can add your class next to that separated by a space like an example below

    <div class="random-class hidden-mobile">

    </div>

    To make your youtube videos responsive on different devices, add your iframe within this div

    <div class="video-responsive">

    </div>

    something like this below.

    <div class="video-responsive">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/7jTq2FXKr0g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

    After that add the following CSS to your active stylesheet.

    .video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    }
    .video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    }

    Clear cache and you good to go. If something doesn't work, Your situation might be different so feel free to PM me the link and I will be happy to help.

    Leave a comment:


  • NMTEACO
    replied
    There is no way to do it without CSS that I know of.

    You basically tag the items you want to hide on mobile, and then in CSS you set it to hide those tags when the screen size in under a certain size.

    https://stackoverflow.com/questions/...ices-using-css

    Leave a comment:


  • Acmeoutfitter
    started a topic Hide/Show Content on Mobile/Desktop

    Hide/Show Content on Mobile/Desktop

    I have certain content that works and shows up on Desktop, but doesnt work on mobile devices. I want to hide the content when viewed on mobile and show something else instead. Is there a good way to do this? Everything i read requires adding/modifying the CSS/HTML but i wouldn't know the first place to start/find this.

    Example: I have Hoverable Dropdown content (mouseover targeted content to reveal a drop down image) which works perfectly on Desktop. However, Hover does not work on mobile devices, so I don't want that to show up on Mobile. I would like to show mobile specific content instead.

    Example: I have a youtube video embeded in the header of my Sub-Category page that plays and fits perfectly on deskotp, but i don't know how to make it responsive to resize for mobile. I would want to hide this video on mobile devices. Alternatively, where can i find the style sheet to add the responsive CSS in conjunction with the HTML for the embded video?( ...specific to said category..???:rolleyes:)

    Note: I have no formal coding experience whatsoever. I can, however, copy, paste and alter existing code as needed :rolleyes:.
    Last edited by Acmeoutfitter; 03-21-2018, 03:26 PM.
Working...
X