CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

removing link on mobile

I have a div which I want to hide when the screen is mobile size. Currently I have

html

<div id='top-btn'>
    <a class="fade-in" href="...">Top</a>
</div>

css

#top-btn a {
  visibility: visible;
  opacity: 1;
  position: fixed;
  ...
}

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

#top-btn a { display: none; }

}

The div is hidden but the button is still there, so there's an area that still links (clickable). I want it to be completely gone so they can't click on it

Upvotes: 0

Views: 374

Answers (2)

Andrey
Andrey

Reputation: 78

For me the code works..without any changes.
Maybe your browser don't support @Media,
Here you can check what browsers support this command
Link: http://caniuse.com/#feat=css-mediaqueries

but before checking the link,try this..

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

#top-btn , .fade-in { display: none; }

}

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42384

You need to remove the whole button, rather than just the link itself:

@media screen and (max-width: 768px) {
    #top-btn { display: none; }
}

Hope this helps!

Upvotes: 1

Related Questions