Hide/Show Content on Mobile/Desktop

[Acmeoutfitter]

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

[NMTEACO]

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

[TangoPixel]

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.

[Acmeoutfitter]

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.

[TangoPixel]

Glad to know that :)

[esbalabs]

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

[esbalabs]

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!

[esbalabs]

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

[obleck]

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!