Alter the styling of headings or body copy on mobile with this CSS hack.
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE’S THE CODE:
I’ve just shown a font size change below, but you can add any other CSS styling you’d like inside the brackets.
Simply change h1 to whichever type you’re trying to target: h1, h2, h3, h4, or p.
If you want to apply it to the whole site:
If you want to apply it to the whole site:
@media only screen and (max-width: 640px) {
h1 {
font-size: 16px;
}
}
If you want to apply it to one block:
@media only screen and (max-width: 640px) {
#BLOCK-ID {
h1 {
font-size: 16px;
}
}}
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.