Apply Any Squarespace CSS to Mobile Only
Have the perfect Squarespace CSS snippet but only want to apply it on mobile? Here’s the guide you need!
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:
All you have to do is add this before the code:@media only screen and (max-width: 767px)
// change the H2 //
h2 { font-size: 20px; }
And if we only want to apply it to mobile, it’d look like this:
@media only screen and (max-width: 767px) {
h2 { font-size: 20px; }}
// apply it to a single block or page on mobile //
@media only screen and (max-width: 767px) {
#BLOCK-ID { h2 { font-size: 20px; }}}
(Replace the block ID with the correct block or collection ID. Here’s how → https://www.ajmexperience.com/learn-p... )
// mobile breakpoints //
@media only screen and (max-width: 767px)
// tablet breakpoints //
@media only screen and (min-width: 767px) and (max-width: 1024px)
// desktop breakpoints //
@media only screen and (min-width: 1024px)
——————
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.