Post by Jansuh » Tue Jun 01, 2021 7:22 pm

Hi there,

I would like to create a HTML content block and show that only on mobile.
Anyone able to tell me how to? I guess the answer is somewhere in DIV classes.

Opencart version 2.3.0.2 and default theme.

Thanks in advance

New member

Posts

Joined
Fri Apr 20, 2018 8:13 pm


Post by paulfeakins » Tue Jun 01, 2021 7:31 pm

Jansuh wrote:
Tue Jun 01, 2021 7:22 pm
Anyone able to tell me how to?
Google "CSS media queries".

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Guru Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom

Post by Jansuh » Wed Jun 02, 2021 4:24 pm

Found it. But don't get it. Sorry, i am more entrepeneur then programmer.

Found this code to add to css

Code: Select all

 .mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 
  @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
And made a html module containing this:

Code: Select all

Show on both mobile and desktop
<div class="mobileShow">
  <p> Show on Mobile only</p>
</div>
Saved the html module and added it to a layout for testing.

unfortunately it shows both lines on desktop view.

So, i think i am close but still am doing something wrong. Any suggestions?

New member

Posts

Joined
Fri Apr 20, 2018 8:13 pm


Post by by mona » Wed Jun 02, 2021 5:07 pm

If I may laugh at close ... close just doesn’t cut it on this O0

First you want it not to display under 320px?
Second - not that it makes a difference but I would actually put them both in a media query. You can check them both, but doesn’t feel right and it does not harm.
Third do not use capitals in css (and never start with a number).

So if I understand correctly :

Code: Select all

<div class="mobile_show">
  <p> Show on Mobile only</p>
</div>

Code: Select all

@media screen and (max-width: 480px) {
  .mobile_show {
  display: inline;
  } 
}

Code: Select all

@media screen and (min-width: 481px) {
    .mobile_show {
    display: none;
    }
}
note iPad mini is 768px
iphone x landscape is 800 ish

768px is the “standard” breaking point
so really you “should” be using 767 and 768 not 480, but no idea what you are doing

adding landscape and portrait orientation just gets very anal and is just as likely to fail as it is to appear in the unlikely event - unless it is absolutely critical (which it never is) it is better to keep it simple and robust.

Remember to clear your cache dashboard and browser
make sure you are changing the correct file
and clear your browser cache

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by paulfeakins » Wed Jun 02, 2021 6:34 pm

Jansuh wrote:
Wed Jun 02, 2021 4:24 pm
Found it. But don't get it. Sorry, i am more entrepeneur then programmer.
Sounds like you should delegate this type of task then to a professional.

Jansuh wrote:
Wed Jun 02, 2021 4:24 pm
Found this code to add to css

Code: Select all

 .mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 
  @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
Well in this in particular you're missing a left curly brace as those should always be matched.

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Guru Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom

Post by Jansuh » Thu Jun 03, 2021 4:13 pm

Edit: i did it right. It ws my caching module that failed to show the changes fast enough. All is fine now.
Thanks for the input.

Some background on why i want a piece of html to not show on desktop. I often see that people search for top menu items when they use the mobile site. The menu with the three stripes icon is not used. Therefore i want to present a simple list of links so they can navigate easier. I doing the best i can to follow what you guys are suggesting but i am afraid i need somebody to tell me exactly what to to. I am sorry, again i am not a programmer.

So here is exactly what i did.

I have edited /public_html/catalog/view/theme/default/stylesheet/stylesheet.css and added the following lines:

Code: Select all

@media screen and (max-width: 767px) {
  .mobile_show {
  display: inline;
  } 
}

@media screen and (min-width: 768px) {
    .mobile_show {
    display: none;
    }
}
Then i created a html module that i want to not show on desktop view. The code of the module is:

Code: Select all

<div class="mobile_show">
	<div class="col-sm-6 col-xs-12">
 <h2 style="border:1px; border-style:solid; border-color:#000000; padding: 0.5em;"><a href="https://www.pureandtimeless.nl/parelketting/">Parel Ketting<i class="fa fa-chevron-right" style="float:right;"></i></a></h2>
<h2 style="border:1px; border-style:solid; border-color:#000000; padding: 0.5em;"><a href="https://www.pureandtimeless.nl/parel-oorbellen/">Parel Oorbellen<i class="fa fa-chevron-right" style="float:right;"></i></a></h2>
<h2 style="border:1px; border-style:solid; border-color:#000000; padding: 0.5em;"><a href="https://www.pureandtimeless.nl/parel-armband">Parel Armband<i class="fa fa-chevron-right" style="float:right;"></i> </a></h2>
</div>

	<div class="col-sm-6 col-xs-12">
<h2 style="border:1px; border-style:solid; border-color:#000000; padding: 0.5em;"><a href="https://www.pureandtimeless.nl/parel-ring">Parel Ring<i class="fa fa-chevron-right" style="float:right;"></i></a></h2>
<h2 style="border:1px; border-style:solid; border-color:#000000; padding: 0.5em;"><a href="https://www.pureandtimeless.nl/parelsieraden-sets">Parel Sets<i class="fa fa-chevron-right" style="float:right;"></i></a></h2>
<h2 style="border:1px; border-style:solid; border-color:#000000; padding: 0.5em;"><a href="https://www.pureandtimeless.nl/parel-informatie">Parel informatie<i class="fa fa-chevron-right" style="float:right;"></i></a></h2> </div>
</div>

I have added this html module to a layout for testing, flushed my nitrocache and still see it both in mobile and in desktop view.

New member

Posts

Joined
Fri Apr 20, 2018 8:13 pm

Who is online

Users browsing this forum: No registered users and 64 guests