Trouble setting smaller fonts, spacing in bulled lists for mobile users in CSS
I have set font size, expanded letter spacing and word spacing in CSS, but I want to set spacing and text size to normal for mobile phones. I have used CSS to successfully do this for headings and paragraphs, but annoyingly it doesn’t work for numbered/unnumbered lists. I’ve used
p {
line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em; for paragraphs and the same for headings, etc. – e.g.
ul {
line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em;
}
li {
line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em;
To reduce spacing & size on mobiles, I’ve used:
@media screen and (max-width: 480px) {
h2 {
letter-spacing: normal;
word-spacing: normal;
font-size: 18px;
}
and the same for paragraphs, other headings and this works fine. However, list are still presented in larger size and spacing using this code after the @media screen….
ul {
letter-spacing: normal;
word-spacing: normal;
font-size: 14px;
}
ol {
letter-spacing: normal;
word-spacing: normal;
font-size: 14px;
}
- This topic was modified 17 hours, 20 minutes ago by .
The page I need help with: [log in to see the link]