Announcement

Collapse

Posting Rules

Posting Rules
This forum was created to help 3dcart users share tips on getting the best out of the service, offer knowledge and experiences about e-commerce in general, and to promote a positive environment in which our merchants can request/dispense advice regarding best practices.

The forum was not created for 3dcart users to submit requests for customer support. Any support related thread will be removed and a support ticket will be placed on your behalf. If you have technical difficulties please visit http://support.3dcart.com.

The 3dcart forum is also not intended to be a medium in which to express dissatisfaction about 3dcart's service, policies or its management and staff. Threads of this nature will also be removed from the forum. If a support issue with your 3dcart store was not resolved in a satisfactory manner; or if you feel that a particular 3dcart offering/policy is not to your liking, please let us know by emailing [email protected] so we can address your concerns directly.

Again, our purpose is to cultivate a positive learning environment for our merchants rather than platform in which to express grievances.

Very Important Rules:
* Never give away your store administration login/password in this forum.

Should you need technical help, please let 3dcart staff help.
Also, please be aware that 3dcart staff will NEVER need to ask for your 3dcart related passwords.

General Rules:
* While debate and discussion are acceptable, we will never tolerate rudeness, insulting posts, personal attacks or inflammatory posts. Our decision is final in these matters.
* Please refrain from posting meaningless threads, one word (or short) nonsensical posts, or similar postings.
* Multiple or repeated posting in order to increase your post count is not allowed.
* Advertising, spamming and trolling is not allowed. This includes using the forum email and Private message system to spam other members.
* We also do not allow posts that are sexual in nature.
* Please wait at least 24 hours before bumping posts.
* Discussion of illegal activities such as software and music piracy and other intellectual property violations are not allowed.
* Each member is allowed one login account. Registering with multiple accounts is not allowed.
* We reserve the right to remove offensive posts without notice.
* We also reserve the right to remove postings which are in violation of our specified posting rules
* Also, while these rules cover most common situations, they cannot anticipate everything. Consequently, we reserve the right to take any actions we deem appropriate to ensure these forums are not disrupted or abused in any way.
* You cannot post any affiliate or referral links, or post anything asking for a referral. Such posts will be subject to removal.
* You cannot post advertisements or notices for contests.
* We also reserve the right to ban anyone who willfully violates the forum rules, as access to our support forums are a privilege and not a right. A banned customer is still entitled to support from the support system, but will not be able to participate in the forum.
See more
See less

Hide/Show Content on Mobile/Desktop

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

  • 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.

  • #2
    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

    Comment


    • #3
      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.
      tangopixel.com
      Website Design and Development

      Comment


      • #4
        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.

        Comment


        • #5
          Glad to know that :)
          tangopixel.com
          Website Design and Development

          Comment


          • #6
            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

            Comment


            • #7
              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!

              Comment


              • #8
                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

                Comment


                • #9
                  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!

                  Comment

                  Working...
                  X