Community @ The Turning Gate
Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
- New user registrations are disabled.
- Users cannot create new topics.
- Users cannot reply to existing topics.
You are not logged in.
- Topics: Active | Unanswered
#1 2016-08-10 22:33:30
be able to detect when moving into mobile size
I have a test page http://garylittle.com/test1/ to show the responsive nature of the site. On that page is a line: "(Resize the browser window to see the effect)" and I would like to detect when moving into mobile size and remove that line.
Offline
#2 2016-08-10 23:51:31
- rod barbee
- Moderator
- From: Port Ludlow, WA USA
- Registered: 2012-09-24
- Posts: 17,830
- Website
Re: be able to detect when moving into mobile size
Put that line in it's own class and write a CSS media query that will hide it for smaller sizes.
<p class="hide-mobile">Your text.</p>In custom CSS:
@media only screen and (max-width: 1024px) {
.hide-mobile {
display: none;
}
}Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
#3 2016-08-11 03:21:26
Re: be able to detect when moving into mobile size
I have done that, here is where I put the code:
<style>
@media only screen and (max-width: 1024px) {
.hide-mobile {
display: none:
}
}
</style>
<h2>Responsive Image Galleries</h2><h3> Click on image to see that gallery</h3>
<p class="hide-mobile"><h3>(Resize the browser window to see the effect)</h3></p>and when making browser smaller and into mobile:
Last edited by gwlco (2016-08-11 03:24:21)
Offline
#4 2016-08-11 04:30:02
- rod barbee
- Moderator
- From: Port Ludlow, WA USA
- Registered: 2012-09-24
- Posts: 17,830
- Website
Re: be able to detect when moving into mobile size
first, don't put heading tags inside of paragraph tags. If you want to use H3 for the text, then assign the class to that particular tag:
<h2>Responsive Image Galleries</h2><h3> Click on image to see that gallery</h3>
<h3 class="hide-mobile">(Resize the browser window to see the effect)</h3>and the css syntax is wrong. I let a colon slip in where a semi-colon should be. Basic css error (fixed above), typing too fast... 
@media only screen and (max-width: 1024px) {
.hide-mobile {
display: none;
}
}Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline