Hide CSS line for certain width

Support
#1

Hi there,

I have created a coloured line with this CSS that appears under my subheading:

.grammar span {
    position: relative;
}
.grammar span:after {
    position:absolute;
    width: calc(100% - 1.5em);
    height: 5px;
    background-color: red;
    content: '';
  	right: 0;
    left: auto;
    bottom: 0;
  	top: 35px
}

Would you please tell me what code I need to add to hide this line for screen widths of 767px and down?

Thank you!
LS

#2

Hi there,

You an add the code in a media query and make it only take effect on screen widths 786px and above.

It should be like this:

@media (min-width: 768px) {
    .grammar span {
        position: relative;
    }
    .grammar span:after {
        position:absolute;
        width: calc(100% - 1.5em);
        height: 5px;
        background-color: red;
        content: '';
      	right: 0;
        left: auto;
      	bottom: 0;
  	    top: 35px
    }
}

You can read more about media queries here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope this helps.

#3

Thank you, Jade!

#4

You’re welcome!

#5

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