-
Posts
-
4.) Hello! I have created a “custom” main navigation for this site within each page which is why I have unchecked the box for a responsive site (it doesn’t look right on mobile if responsive) Since it is not responsive, the text is too small to read on mobile unless the user rotates their screen horizontally, so I am using the only-mobile and only-desktop quick CSS codes below to display the content at different sizes on mobile and desktop/laptop which work perfectly:
@media only screen and (min-width: 990px) {
.only-mobile { display: none !important; }}
@media only screen and (max-width: 990px) {
.only-desktop { display: none !important; }}However, on iPad the it registers as mobile, is there a way to alter the code and make it so that on tablets it shows the site as desktop-only? I have played around with the min and max width but have been unable to find a px number that works. Please see private area for link.
Thank you guys so much and hope you had a wonderful holiday.
Hi digitalammo,
What elements are you trying to target on tablet only and what elements do you want to show/hide? From what I can see the code you posted it hiding those two classes at 990 pixels and down.
Regards,
RikardWhat you see on desktop/laptop is what I want displayed on tablet. (all elements you see on desktop/laptop are tagged with only-desktop) Currently, tablet displays the site as if it were mobile which is not what I want. I tried playing around with the pixel values with no luck.
I got the exact code from this link: http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/
Hi!
Please try changing the code to following one for tablet portrait mode
@media only screen and (min-width: 769px) { .only-mobile { display: none !important; }} @media only screen and (max-width: 769px) { .only-desktop { display: none !important; }}If you would like to target smartphones only, please change “769px” to “480px”
Cheers!
YigitHello! When I use 769 for both codes tablet displays desktop-only elements but my mobile device displays only the desktop-only elements as well. Same goes for when I use 480.
I hope I explained myself thoroughly enough, if not i’ll attempt to clarify.
On the url I provided, each element that you see on dekstop/laptop has been tagged with desktop-only. I basically have all those elements duplicated and modified for viewing on mobile, they have been tagged with mobile-only. Everything works great except for the fact that tablet displays the mobile-only elements instead of the desktop-only elements, which does not look good because the text is much too large, the “custom navigation” I created is too large, etc. I hope that helps if I wasn’t clear enough before! :)
Thank you!
Hey!
Please replace the css media query with this:
@media only screen and (min-width: 769px) { .only-mobile { display: none !important; }} @media only screen and (max-width: 768px) { .only-desktop { display: none !important; }}We decrease the max-width by 1px.
Best regards,
IsmaelHello! Thank you for your guys’s help. I was running out of time so I just decreased the sizing of certain mobile-only text and elements so that they wouldn’t appear too large on tablet but would also still be large enough to read on mobile. I’m sure I will need to use this code again at some point so i’d like to keep this thread open if you guys don’t mind.
Thanks for everything!
- You must be logged in to reply to this topic.