How can I remove blue line that is underlined my arrow class in my responsive work?

1

I faced interesting issue when I resize my window in @media only screen and (max-width: 640px) on my screen blue underline appears on my arrow class and I was trying to remove with text-decoration: none; but didn’t help. Also when you resize window smaller like @media only screen and (max-width: 541px) the blue line is still there. But when for example on large screen devices such as @media only screen and (max-width: 1024px) and larger its gone and when you hover on arrow its how supposed to be.

These are media queries that causing blue underline line on my arrow class:
@media only screen and (max-width: 768px)
@media only screen and (max-width: 640px)
@media only screen and (max-width: 541px)

This is my portfolio link : http://codepen.io/Vladimirpak/pen/BpYmGg

2

I tried a couple things, but IMHO, I think it’s a glitch in codepen. If you can, pull your code off codepen and run it through your fave code editor (notepad++, sublime3, atom, …) and then open it in your own browser locally, it may fix the issue.

1 Like
3

You can override bootstrap at each media size by adding an id to the <a> and flagging the text decoration as important.

<a href="#section-cards" id="arrow-down"><i class="fa fa-arrow-down"></i></a>


#arrow-down, #arrow-down:hover{
  text-decoration: none !important;
}
2 Likes
4

I also override it, didn’t help but I’ll try this one.

5

thanks it helps :slight_smile:

6

ahhh, that’s a cool solution … so, it is something in bootstraps css glitching out?

7

I assume that bootstrap 4 is in alpha version so it might glitching out. But previous solution works well :slight_smile: