How to make a link appear only on mobile?

Hi,

I want to make put a link at the bottom of the link saying may be “Go to Desktop Site” and I want it to appear only when the site is viewed on mobile.

I am sorry, I don’t have much knowledge. So, please bear me

Thanks again.

1 Like

I’m confused. If you’re building two separate versions - desktop and mobile - then simply include the link in the mobile version and not the desktop version.

If you’re building a responsive site which adjusts to any screen size, you don’t need a link like that at all.

thanks for replying.

I am building a responsive site which adjusts to any screen.

But, my clients still want that button so I have to do it.

please help me.

thanks again.

In that case, how will the button function? What will it link to, if there isn’t a separate desktop version?

Perhaps it would be better to explain to your client how responsive design works, and why they don’t need that button.

hmm. well you are right.

Actually they have seen this site on mobile, http://www.spin1038.com/

But, I think these guys have built separate sites for mobile and desktop.

But, my clients want like this.

It makes no sense but you COULD have the link there all the time and hide it for desktop and in your media queries unhide it for mobiles…

But I fail to see how you could build a responsive site and then have a link for a desktop version - unless you used a style sheet switcher, which seems pointless and defeating the purpose. What, exactly, do you expect that link to do?

I really think you need to discuss things with your client and explain the issues to them.

hmm you are right

A post was split to a new topic: Blog layout in responsive WordPress site

Add a css media rule

@media only screen and (max-width: 479px) { .mobile-hide{ display: block !important; } }

Then any element you wish to hide on mobiles just add .mobile-hide as the class;

e.g <a href="index.html" class="mobile-hide">This link wont show on a mobile</a>

1 Like

That rule sets the display property of the element to block, rather than inline. I believe you meant to use display:none. (Also, you are attempting to block it on mobile, which is the opposite of what @Nauman_Tanwir requested.)

However, you are missing the fundamental issue here.

Sites which have two separate versions - mobile and desktop - usually use some kind of browser-sniffing to decide which version to serve. They then provide a link on each to the other version, so that if the wrong one has been served, the user can switch.

Responsive design does away with the need for that by creating a single site which will adjust to display on any device. So if you have a single site, there is not another version of the site for the button to link to. If you insert such a button on mobile, what is it going to do? Where will it link to? How will it function? Why would it even be needed?

3 Likes

It would link to the same page.

It would function the same way a ‘go to top’ link would function.

It would be needed to convince people that the site uses an antiquated multi version approach rather than a modern single responsive page one so as to drive people away from the site.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.