Font line height in media query

[wowflak]

Hi
I am trying to change the line height in this modal for mobile. If you click on the songwriter list on the left it looks good on desktop but for mobile I sized down the font and want the line height to also go down, the line height refuses to change.

Songwriters Hall Inducts Cyndi Lauper | Concord

Here is the css:

@media (max-width: 768px){
.artist-menu-link a {
font-size: .5em !important;
line-height: 1em !important;
margin-left: 0px;
margin-right: 0px;
padding: 0;
}
}

Thanks

[nico]

Hi @wowflak

Thanks for writing in.

I could see that you have added the code however it is not executed. This problem happens because there could be an excess opening or closing bracket.

You could search for it or share us your admin credentials so we could help you find the culprit.

Don’t forget to set it in a secure note.

Thanks.

[wowflak]

Okay, I am attaching creds in secure note.
Thanks

[Joao]

Hi There,

I Clean the cache of autoptimize and it looks good, please take a look!

Thanks!

[wowflak]

Hi
I am not seeing the change. I also set the line height smaller and cleared auto optimize but no change for mobile.

[friech]

Hi There,

There are no changes because that spacing is not a line-height issue, actually, you decrease the line-height too much that the links overlap to each other. Add the following custom CSS to Theme Options > CSS to understand what I’m saying.

@media (max-width: 767px) {
	.x-modal-content br {
	display: none;
	}

	.x-modal-content a {
		display: block;
	}
}

Increase your line-height to 1.5 or where you see it fits.

Those spacing are the <br> tags, not a line-height.

Cheers!

[wowflak]

Ahhh, okay. Should I be doing something other then break tags to get those names on there own line?

Thanks so much!

[jade]

Hi there,

Instead of using the breakline tag, you can have the names display in one line by adding display:block; width: 100% to the CSS of the link items.

Hope this helps.