Archived topic
How to make headings responsive?
5 replies · Started by sportsfan74 on June 21, 2019
Whenever I make changes to the H3 heading tag in the typography section, it just stays the same font size throughout desktop, tablet and mobile devices.
How do I make the font sizes to show or reflect differently for the H3 heading tag on desktop, tablet and mobile?
Hi there,
you would need some CSS like this:
@media (max-width: 768px) {
/* CSS in here for mobile only */
h3 {
font-size: 24px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
h3 {
font-size: 28px !important;
}
}
Hi David
The mobile one is working, thanks.
but the tablet one is not working for me?
Could share a link to the site so i can take a look?
You can edit your original topic and use the Site URL field to share the link privately.
using localhost xampp to test website
You could try adding some importance to the CSS property - i edited the code above to include that