Changing display on a mobile device -...

User 2361117 Photo


Registered User
115 posts

I am currently using HTML Editor paid version 16.1, build 808 to modify a one-page responsive website theme. While the website appears to be working well on my desktop, laptop, and mobile phone, I would like to remove/prevent a number of links from being displayed on a mobile device as they are only required/of use when the website is viewed on a desktop/laptop computer. Given this is a responsive website theme intended for desktop, laptop, and mobile devices (as opposed to having two separate websites to accommodate desktop/laptop computers and mobile devices), is there a way to code the HTML, CSS, or both to remove the links when viewed on a mobile device or is this not an option when using a responsive website theme? The website is https://www.easypdfeforms.com. The section under consideration is 'portfolio'. The links are provided by smaller icon images displayed by a 'plus' and a 'link' Thank you ahead of time.
User 2699991 Photo


Registered User
4,782 posts
Online Now

some CSS would do it
give your things class name
EG:
.content-desktop
.content-mobile


make max width the amount where you wish to change the display of the elements
the css


@media screen and (max-width: 640px) {
.content-desktop {display: block;}
.// or whatever the display is currently set to

.content-mobile {display: none;}
}
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2361117 Photo


Registered User
115 posts

Wayan,

Thanx for the reply. My only thought is how do you determine/arrive at the cut-off for max-width of a mobile device? As I am not really a phone person, am I correct in assuming that 640px should be the max-width for a mobile device? Logic would seem to dictate I want to use the most common max-width for a mobile phone as opposed to a tablet, correct?
User 2361117 Photo


Registered User
115 posts

On second thought, I think I would be better off reversing the CSS code as follows:

@media screen and (max-width: 768px) {

#content-desktop {display: none;}
#content-mobile {display: block;}

}

What do you think about this?
User 2699991 Photo


Registered User
4,782 posts
Online Now

boilermaker73 wrote:
On second thought, I think I would be better off reversing the CSS code as follows:

@media screen and (max-width: 768px) {

#content-desktop {display: none;}
#content-mobile {display: block;}

}

What do you think about this?



Give it a try & see which one is right
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

There are over 69,000 different combinations of mobile phones available for purchase and in use,

so from that, you tell me what the cut off is for mobile phone & tablet :D

640 or 768 not that much difference





Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2361117 Photo


Registered User
115 posts

Point taken. It appears to be a crapshoot at best. On another note, I implemented both the HTML and CSS as instructed and for whatever reason, my website displayed both versions, desktop and mobile, when viewed on my laptop computer. I didn't bother to view the website on my mobile phone as I have no reservations whatsoever that the result was going to be the same. What I don't understand is that I wrapped the HTML for the desktop/laptop and the one for the mobile (removing the code I didn't want to appear on the mobile device) in separate <div> and that part works as intended. However and as already stated, both versions are displayed/duplicated with exception of the HTML removed from the mobile version when viewed on my laptop. Any ideas what can be causing this behavior? Thank you ahead of time.
User 2361117 Photo


Registered User
115 posts

On another note what about just adding <div class="mobileHide"> and wrapping each pair of links in a <div> whereby the links are omitted or not displayed when the website is viewed on a mobile device? The code to be added to my CSS file would be like you initially provided or
.mobileHide{display:none;}
@media screen and (max-width: 640px) {
.content-desktop {display: block;}
.content-mobile {display: none;}
}
Your thoughts?
User 2361117 Photo


Registered User
115 posts

Hey Wayan,

I ended up adding a <div class="mobileHide"> wrapping each and every pair of links (8 pair total) and then added this code to my CSS: @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ .mobileHide { display: none;}}
Works like a charm. To quote an old saying, 'there is normally more than one way to skin a cat', I believe this to be the best option. Thanks for your initial reply as it was what got me thinking in coming up with the solution.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.