UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
Found it. But don't get it. Sorry, i am more entrepeneur then programmer.
Found this code to add to css
And made a html module containing this:
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?
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;}
}
Code: Select all
Show on both mobile and desktop
<div class="mobileShow">
<p> Show on Mobile only</p>
</div>
unfortunately it shows both lines on desktop view.
So, i think i am close but still am doing something wrong. Any suggestions?
If I may laugh at close ... close just doesn’t cut it on this
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 :
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
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;
}
}
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
Sounds like you should delegate this type of task then to a professional.
Well in this in particular you're missing a left curly brace as those should always be matched.Jansuh wrote: ↑Wed Jun 02, 2021 4:24 pmFound this code to add to cssCode: 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;} }
UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
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:
Then i created a html module that i want to not show on desktop view. The code of the module is:
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.
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;
}
}
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>
Who is online
Users browsing this forum: No registered users and 95 guests