Squarespace Mobile // Creating Custom Code for Mobile using CSS Media Queries
Вставка
- Опубліковано 5 жов 2024
- Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 insidethesquar...
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar...
---
In this tutorial, you'll learn about media query codes and how you can use them to change the way your Squarespace site looks based on screen size.
If you want a browser to apply a custom code to a specific device size, media queries are how you make that magic happen! They let a browser know to only apply a code when a screen is a specific pixel width.
Before you start plugging away with the codes below, here is some important info you should know:
Squarespace is a responsive website builder.* This means it will automatically change the look, size, and layout of your website content based on screen size. Using the media queries below, you can overwrite some of these responsive changes, but be careful that you aren’t reinventing the wheel! Some of their responsive style changes are there to help with accessibility standards and to make it easier for people to navigate the content of your site. Just because you can change it doesn’t mean you should. 😉
Devices are always changing. * The current size iPhone is a totally different screen size and resolution than it was 5 years ago, and 5 years from now, it’s probably going to be different again! This is why responsive site builders like Squarespace are great - your site will change based on breakpoints so you don’t have to keep track of every single phone width out there. That also means that you should try to keep your queries to a minimum, and focus on the common breakpoints below, so your site displays similarly across common devices.
Always. Close. Your. Query. ALWAYS. * A media query is kinda like a box that you holds all the codes for that screen size. If you don’t close the box, and you add more code to your site, you will end up with a hot mess pretty quickly. Make sure you always add the closing curly bracket } when you are done with all the code changes for that device size.
SUGGESTED BREAKPOINTS FOR SQUARESPACE
These are the codes I use in my own Squarespace site creations and are just a suggestion. Change up any of the PX values below to create your own breakpoint.
MOBILE ONLY
@media screen only and (max-width: 640px) {code goes here}
TABLET ONLY
@media screen only and (min-width: 641px) and (max-width:950px) {code goes here}
DESKTOP ONLY
@media screen only and (min-width: 951px) {code goes here}
---
📱 Squarespace Mobile + Tablet Workshop → insidethesquare.co/mobiledesign
---
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 InsideTheSquar...
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquar... ❤️
---
🙋 Need some help? Visit insidethesquar... to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips #squarespacemobile #mobilesquarespacesite #mobilesitesquarespace #mobilesquarespace
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
You are my coding fairy! Thank you!
Great video, thank you so much for the information!
Yay - so happy my tutorials are helping you rock your Squarespace site 🥳
Well done and very helpful - as always! Thank you from Germany!
BTW: do you update your "cheat sheet" from time to time?
You are so welcome! 😊 And YES - I try to update it at least once a year, sometimes twice if there are major code changes. I always send out an email to everyone who has purchased it in the past so you have the latest and greatest to work with 😎
@@InsideTheSquare Thank you, Becky. Purchased!
Hey there Becca! Very new. I used another tutorial you made to add custom hover states on thumbnails. I added a solid with opacity and type fading on. I'm having some trouble making sure that doesn't happen on mobile. How do I set the medium query code to remove thumbnail hover states? Thanks again!!
That's a great question - you can group them into what's known as a "media query" which basically says to a computer: if the screen is this size, do this. Here is an example of adding a code that only works on computers, not tablets or mobile:
@media only screen and (min-width: 951px) {
selector{
property:value
}
}
@@InsideTheSquare Thanks for the reply. This is an example of the code I'm using to fade in the type and the black solid...when I change it to 951, it's still visible on mobile. How can I adjust it so it works?
@media only screen and (min-width: 640px){
#block-ec4a296f5a26dfee7cc7 {
opacity: 0;
transition: opacity .25s
Hi there! Really appreciate the content it's been helping a lot, I'm a bit stuck on this video though as I'm trying to change the font of my project/gallery titles to get a little bit smaller, but nothing actually changes when inputting the code. For some reason the text isn't centred on mobile as well so it looks really weird, do you possibly know how to fix this?
Thanks in advance!
Interesting! If you know your using the right selector, try adding !important after the value to make sure the browser sees your edit. If that doesn’t do it, check out my other troubleshooting tips at insidethesquare.co/codehelp
Thank you very much however I would like to change banner cropping on mobile to show the banner the same as in Desktop please.
There is no way to avoid the responsive auto crop built into Squarespace, but you can create a second section with a mobile specific background. Check out this tutorial for more info: insidethesquare.co/squarespace-tutorials/custom-mobile-layout
Can you apply this to specific block?
You can use a unique block ID to target a specific thing on your site; check out this tutorial for more info: ua-cam.com/video/h8qfZdaATbU/v-deo.html
Hi, nice tutorial and much needed I must say :) However, I cannot for some reason see any change in my headings with this code :( I have 7.1 Squarespace
Hey Janne! I'd be happy to help you troubleshoot but I need more info on what you are trying to do. You can send in a code help request at insidethesquare.co/code-help
@@InsideTheSquare thanks! I sent you the request
@@InsideTheSquare Did my request come through? I am suspecting that the reply might be washed away in my trash folder :)
i want to change the font color to mobile white and desktop black can you please help :( if i change the color white in mobile then it algo changes the desktop to white :
You can absolutely do that with CSS! What text are you trying to change? It it's all text on the page, this code will do it:
@media screen only and (max-width: 640px) {
#page * {color:#fff!important}
}
but if it is a specific thing, like a site title, or your heading text, it's much easier to target that individually. This example would change all H1 text on mobile:
@media screen only and (max-width: 640px) {
h1 {color:#fff!important}
}
Hope that info helps and bet of luck with your project!
Does anyone know the proper way to apply this code to a custom block ID?
I do! 🙌 Check out this tutorial:
ua-cam.com/video/h8qfZdaATbU/v-deo.html