How to change your Squarespace mobile site using media queries // Squarespace CSS Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ม.ค. 2025

ความคิดเห็น • 107

  • @InsideTheSquare
    @InsideTheSquare  ปีที่แล้ว

    ⚠ 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: th-cam.com/video/euJqHXs_L1M/w-d-xo.html

  • @kellyypaints
    @kellyypaints 4 ปีที่แล้ว +1

    Your videos have been so helpful!! Thank you for providing these incredible resources!
    also your shirt is super rad :)

  • @audralinsner8010
    @audralinsner8010 4 ปีที่แล้ว +2

    Thank you so much, as someone who's had trouble understanding code you really made it more digestible!!

  • @moosemountainadventures8139
    @moosemountainadventures8139 3 ปีที่แล้ว +2

    Focus point. oh my gawwd. what a dummy. how did I not recognize that earlier. THANK YOU. All your videos are super helpful. Heading over to purchase code snippets now.

  • @anawile3152
    @anawile3152 4 ปีที่แล้ว +2

    Like the “real” example and your simple, direct explanations! Thanks

  • @SonicSinema
    @SonicSinema 4 ปีที่แล้ว +1

    This is exactly what I needed. You are an incredible human, thank you !

  • @KeithKorneluk
    @KeithKorneluk 4 ปีที่แล้ว +1

    Just what I needed. Thank you!

  • @anawile3152
    @anawile3152 4 ปีที่แล้ว +1

    Love your attitude, thanks for the help.

  • @deanhomicki5782
    @deanhomicki5782 4 ปีที่แล้ว +2

    Thanks so much for this mobile code. It was such a help. I also needed to adjust the font weight for the paragraphs on mobile so I added this code snippet to CSS - Thank you, you have taught me heaps!!!
    @media only screen and (max-width: 641px) { p {font-size: 16px!important; font-weight: 300!important;}
    Thank you, you have taught me heaps Becca!!!

  • @studiolucephotography8484
    @studiolucephotography8484 4 ปีที่แล้ว +1

    OMG where have you been? Awesome thanks so much

  • @camilotristancho6393
    @camilotristancho6393 4 ปีที่แล้ว +1

    Great! this is exactly what I needed!

  • @SpeakingEnglishToday
    @SpeakingEnglishToday 2 ปีที่แล้ว +1

    Thank you! What is the code? I can't see it since the text on the screen is really small.

    • @InsideTheSquare
      @InsideTheSquare  2 ปีที่แล้ว +1

      I wrote down all the media query codes I covered in this video into one pdf that you can get for free at insidethesquare.co/mobile

    • @SpeakingEnglishToday
      @SpeakingEnglishToday 2 ปีที่แล้ว

      @@InsideTheSquare Thank you!

  • @MsJamilaD
    @MsJamilaD 3 ปีที่แล้ว +1

    Super helpful for a baby coder!

  • @jamesowen8446
    @jamesowen8446 4 ปีที่แล้ว +1

    Great tips!

  • @AuricVibes
    @AuricVibes 3 ปีที่แล้ว

    You are awesome! Tysm!

    • @InsideTheSquare
      @InsideTheSquare  3 ปีที่แล้ว

      Thanks Courtney - so happy I could help! 🥰

  • @notthe1stnoelle
    @notthe1stnoelle 4 ปีที่แล้ว +1

    Super helpful, thank you!

  • @midnightoracleminis3585
    @midnightoracleminis3585 3 ปีที่แล้ว +1

    can you change focal points for videos or gifs?

    • @InsideTheSquare
      @InsideTheSquare  3 ปีที่แล้ว

      Great question! Videos, nope. But gifs? Totally! It's the same little circle you'll see for images. 👍👍

  • @immaUnquiet
    @immaUnquiet 4 ปีที่แล้ว +1

    Ure awesome, thank u!☺️

  • @anawile3152
    @anawile3152 4 ปีที่แล้ว

    That is so cool! Thanks

  • @aashinirambosson362
    @aashinirambosson362 4 ปีที่แล้ว +1

    Thanks for the video. How ever I have two images on my home page which is not banner images. They are slideshow full size. But these images are cropped on phone version. Is there any way to resize the full size slidesho gallery just for phone? If not, is there a way to remove that one section for phone version?

  • @sribeats2591
    @sribeats2591 4 ปีที่แล้ว +1

    Hi is possible to overlay an image as background rather than coloured background?

  • @TS-2134
    @TS-2134 ปีที่แล้ว +1

    Is it possible to adjust the layout of blog posts on mobile? Can I overlap images in mobile or keep text next to the image instead of above or below it?

    • @InsideTheSquare
      @InsideTheSquare  11 หลายเดือนก่อน

      Great question - and yes! You can always use a media query if you want to limit a custom code style to a specific screen size. Check out this page on my blog for more info: insidethesquare.co/mobile

  • @Fxjono
    @Fxjono 4 ปีที่แล้ว +2

    Thank you so much for this content and the cheat sheet. I'm still new at this.
    How can I play a different video on mobile compared to the one on desktop? How do I ad different links for video?

    • @mrjonjon
      @mrjonjon 4 ปีที่แล้ว

      I had the same question. Haven't found anyone explaining a fix for this.

  • @davidledger7894
    @davidledger7894 4 ปีที่แล้ว +1

    Just bought your CSS Cheatsheet today, Thank you! Can't figure this out though! I have a button in my header. When I switch to mobile I would like to bring the button down in size, any thoughts? Thank you!

  • @dharrshiyniselvam4658
    @dharrshiyniselvam4658 4 ปีที่แล้ว +1

    Hi, can I ask how do you place the text on the image?

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว

      Hey Dharrshiyni! You can place text over an image in Squarespace using a poster image block - no code required :)

  • @tylerwinter512
    @tylerwinter512 2 ปีที่แล้ว

    Hey!!! I love your content! Do you know how to lock the site portrait orientation when viewing on mobile?? I don’t want my site to rotate with the device.

    • @InsideTheSquare
      @InsideTheSquare  2 ปีที่แล้ว +1

      Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. if I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

    • @tylerwinter512
      @tylerwinter512 2 ปีที่แล้ว

      @@InsideTheSquare Awesome!!! Thanks for replying! Im gonna keep scouring the internet for a solution, I’ll let you know if I find one. I know if people visit my site through Instagram it won’t rotate so that’s cool, but that “responsive design” or whatever they call it is really tough to work with some times. It seems like there’s no rhyme or reason to it, like sometimes it resizes decently but then others it’s like what the heck are you doin to my page?! Lol anyways thanks again, love your channel!!!

  • @kelpx7
    @kelpx7 4 ปีที่แล้ว +2

    How can I have the layout of my summary next to each other on desktop and above each other on mobile? Thanks

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว +1

      Hey Kelmara - I'd love to help but I need some more info... which version/theme are you using? And what type of summary block? Feel free to reply here or send me an email (hello-at-insidethesquare.co)

  • @trafficprobeds5382
    @trafficprobeds5382 2 ปีที่แล้ว

    Is there a way to leverage this for a clean embed?

    • @InsideTheSquare
      @InsideTheSquare  2 ปีที่แล้ว

      Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉

  • @kitleydefelice865
    @kitleydefelice865 3 ปีที่แล้ว +1

    I'm wanting to make an embedded video I've included appear after the text in mobile but maintain where it is (at beginning of text) with the text wrapping on desktop. Do you know how I could do that?

  • @dcdigitalmarketing2266
    @dcdigitalmarketing2266 3 ปีที่แล้ว

    Thanks for the help!
    Could I do this for a specific section of my website?

    • @InsideTheSquare
      @InsideTheSquare  3 ปีที่แล้ว

      Great question - and totally! :) You can isolate a single page (info on that here: th-cam.com/video/kX6kRjCbzu8/w-d-xo.html ) or a single section if you use it's data section id (7.1) or it's index page name (brine v 7) Hope that info helps! ❤️

  • @Decatilinae
    @Decatilinae 4 ปีที่แล้ว +1

    Hi... is it possible to replace only for the mobile version with a different image?

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว +2

      Totally! You can upload the image file as the background to your element like this: #elementid {
      background-image: url(paste image url here)!important}
      You will want to host the image on your own site as a custom file, and be sure to add the mobile breakpoint code from the guide before your element name. Now there are some nuances for resizing background images to look great, but that code should help you get started. If you want some help with a specific site feel free to email me a link and I can help you write up the full code 👍👍

    • @Decatilinae
      @Decatilinae 4 ปีที่แล้ว

      @@InsideTheSquare wow...thanks a lot for your help... definitely I will ask you if I get in trouble. Keep going on what you do on Squarespace, will love to see also one day if you can make some more advance stuff like animation and complex website... I am planning also to get your SEO course soon...thanks cheers from Italy

  • @tameckaadell
    @tameckaadell 3 ปีที่แล้ว

    This is helpful. Would I use media queries to change the font style on 7.1 mobile only for the menu? I used your steps to create a menu dropdown on desktop but the font on mobile didn't change & I need it to.

  • @Rose.Adorna.7
    @Rose.Adorna.7 3 ปีที่แล้ว

    Are we able to have shop items side by side instead of one by one in the mobile app?

    • @InsideTheSquare
      @InsideTheSquare  3 ปีที่แล้ว

      Hey Sheer! If you are using version 7.1 this tutorial will help you update your mobile site to display two rows of products: th-cam.com/video/Nx3cmwGbqhg/w-d-xo.html

    • @Rose.Adorna.7
      @Rose.Adorna.7 3 ปีที่แล้ว

      @@InsideTheSquare you are so amazing. Thank you beautiful!

  • @lucky-shirt
    @lucky-shirt 4 ปีที่แล้ว +1

    How do I change the color of the font on mobile view?

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว

      Hey Valerio! Inside the media query, you can add the name of the font you want to change, and then the color you want to change it to. Here is an example that will change a Heading 1 text to purple on mobile devices. The !important part makes sure the browser will prioritize my code over it's normal setting. Hope this example helps!
      @media only screen and (max-width: 480px){ h1 {color:purple}

    • @lucky-shirt
      @lucky-shirt 4 ปีที่แล้ว

      Thanks so much!
      @@InsideTheSquare

  • @WhitneyKrenek
    @WhitneyKrenek ปีที่แล้ว

    Hey Becky! Is there a CSS to disable mobile view entirely for 7.1?

    • @InsideTheSquare
      @InsideTheSquare  ปีที่แล้ว

      Have you looked into the Squarespace support articles? This one should help: support.squarespace.com/hc/en-us/articles/205815398-How-will-my-site-appear-on-mobile-devices-#:~:text=To%20disable%20mobile%20styles%3A,Click%20Save.

  • @MeowfaceMusic
    @MeowfaceMusic 2 ปีที่แล้ว +1

    Hi, Becca,
    Using SquareSpace can both my desktop and mobile views have different content? For instance, to super-duper optimize loading-speed, I'm considering doing things like having an image on desktop be 1,000 pixels wide and then having the same image on mobile be smaller at like 250. (I'm a total web-building novice; is such thinking logical?) Thanks!
    And applying this same question to what you did in this video, is it possible instead to replace the banner image in mobile with a different picture or the same picture sized differently to make your sitting-pose appear smaller and down in the right corner?

    • @InsideTheSquare
      @InsideTheSquare  2 ปีที่แล้ว +1

      Great questions! I have a tutorial all about creating a layout specific for mobile devices that I just published earlier this month; hope it helps! th-cam.com/video/AQnwhitEqnI/w-d-xo.html

  • @pabloYTC
    @pabloYTC 4 ปีที่แล้ว

    How do you edit the mobile font?

  • @MandyAmelia
    @MandyAmelia 4 ปีที่แล้ว

    I didn’t see which PDF I need to download to get these codes. Is it all 3 on the webpage?

  • @ThinkTankGallery
    @ThinkTankGallery 4 ปีที่แล้ว

    Very helpful. I've been searching and searching, but is there a simple media query to simply disable mobile view completely on a particular page? That is, if I go to settings on a page and click "PAGE HEADER CODE INJECTION" can I add CSS there to completely disable mobile view on that page only? If not, can I do so site-wide?

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว

      Interesting idea! Technically, it can be done, but you would need to set up a code for every specific element on the page, like text, buttons, images etc... Basically there isn't an off switch for a responsive builder like Squarespace so you would have to tell a browser "not this thing or that thing or this thing either"
      Hope that answer helps! Feel free to send me a link if you want to get into the specifics - you can email me directly at hello at.insidethesquare.co

  • @appoline8091
    @appoline8091 4 ปีที่แล้ว +1

    You're so dope! Thanks for helping me out.
    I've been tryna figure out how to replace the background image with another image just for mobile.
    Is this possible on the Kin template (brine family)?
    Thanks

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว +1

      Hey Appoline - totally possible! A little combo of a media query and a background image code can do the trick. Can you send me a link to the page you want to do this on? Index pages and regular pages are a little different, but with the link I can help ya track down the code names you need to make it work. Feel free to post here or email me directly (hello-at-insidethesquare.co)

    • @PurpleGlamx3
      @PurpleGlamx3 4 ปีที่แล้ว

      InsideTheSquare you’re i life saver! I’m getting so frustrated! I’m trying to do the same thing the commenter above is doing. Can I get the code for using a different image on mobile than the full site? Thank you so much for making this video!

    • @PurpleGlamx3
      @PurpleGlamx3 4 ปีที่แล้ว

      My site is not live yet so I don’t have the link but I’m trying to do this for my home page!

    • @EdKirwan
      @EdKirwan 4 ปีที่แล้ว

      @@InsideTheSquare Your tutorials are so good - thanks for all your help! I'm in a similar situation - is it possible to paste the answer here as I'm sure others would like to know too.
      My issue is I want to use a banner video on desktop and then either make it smaller (not sure how - so that it stays within the boundaries) or replace it with an image.
      Please let me know how I'd need to code this if at all possible! Thanks so much!

  • @anawile3152
    @anawile3152 4 ปีที่แล้ว

    Sometimes it really is like magic!

  • @andreamerrillco
    @andreamerrillco 4 ปีที่แล้ว

    How can you use this to how the floating newsletter in the header & first section? I can’t seem to use the data-section-id (I’m using your code to target two images but I have to grab the image section data to pull it into those sections. I can’t seem to use the mobile code with the code I have to break them up, right now there on top of each other.

  • @h4mil70n
    @h4mil70n 3 ปีที่แล้ว

    Hi @Becca, i found this tutorial extremely helpful, however there appears to be an issue when scrolling down, then up, then clicking the menu - it disappears and because it thinks there's a menu open, the site is now disabled. Have you seen a fix for this?

  • @alsayre3
    @alsayre3 2 ปีที่แล้ว

    I am having the most difficult time resizing my banner image for mobile on 7.0, Brine.

    • @InsideTheSquare
      @InsideTheSquare  2 ปีที่แล้ว

      Hey Austin! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help

  • @SoccerAddictttt
    @SoccerAddictttt 2 ปีที่แล้ว

    is there any way to have a one type of gallery on desktop and a different one on mobile? SS keeps cropping the pictures in my gallery when I switch to mobile. I have a slideshow as my gallery. thanks!

    • @InsideTheSquare
      @InsideTheSquare  2 ปีที่แล้ว

      Absolutely! Check out this tutorial that will teach you how to create an alternate layout for mobile: th-cam.com/video/AQnwhitEqnI/w-d-xo.html

  • @johnmouratis7058
    @johnmouratis7058 3 ปีที่แล้ว

    I'm trying to change my text size from heading 2 to heading 4 for the mobile version. Any idea what code can do that?

    • @InsideTheSquare
      @InsideTheSquare  3 ปีที่แล้ว

      Hey John! You can't force a div to change types using CSS, but you can change the h2 formatting to match what you have assigned the H4. Use things like font-size, font-weight and you can make it look more like an H4

    • @johnmouratis7058
      @johnmouratis7058 3 ปีที่แล้ว

      ​@@InsideTheSquare I see but that then would make my text smaller for the desktop version right? Basically I want my text to appear in 2 lines (which it does now on desktop version) but on mobile version because its probably big for the screen size it appears in 4 lines.

  • @TATONKA-THE-ETERNAL
    @TATONKA-THE-ETERNAL 2 ปีที่แล้ว

    When I use my mobile it is exactly how I designed it but when I put my website link on instagram and click on it, when it opens the CSS is not being applied and my heading text is too big? Pls help!

    • @InsideTheSquare
      @InsideTheSquare  ปีที่แล้ว

      That's a tricky one - it might be the cached version of your site being served on Instagram. I would test it using a different phone and/or try the "open on browser" option after clearing your cache.

  • @rharb16
    @rharb16 4 ปีที่แล้ว +1

    Thanks for another super helpful tutorial! I was wondering if/how to remove the background image from a specific section on my homepage? I'm not sure which section background image I will be hiding if I use this code :)

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว +1

      Hey Reharb92! You can specify one section using an nth-child CSS code; check out this gradient section tutorial around the 2:30 minute mark for some pointers on how to set that up, and combine it with your mobile media query: th-cam.com/video/r2uNYK0N7eU/w-d-xo.html

    • @rharb16
      @rharb16 4 ปีที่แล้ว

      @@InsideTheSquare It worked!! Thank you so much.

    • @rharb16
      @rharb16 4 ปีที่แล้ว

      @@InsideTheSquare Is there a code modification I can apply to completely remove the specified section when viewing on mobile?

  • @Seanyhc
    @Seanyhc 4 ปีที่แล้ว +1

    Is it possible to change the mobile breakpoint in 7.1? My site navigation switches to mobile version (hamburger menu) when it's still 907px wide!

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว +2

      Hey Sean! The short answer is - yes! However it's pretty dang complicated. We have to force the main nav to a smaller break point and I'm still working on a tutorial for it so stay tuned. Promise to post the link here when I upload it so you don't miss it!! 👍👍

    • @Seanyhc
      @Seanyhc 4 ปีที่แล้ว

      InsideTheSquare awesome! Thank you and looking forward to the new tutorial.

  • @kiondrefinner3931
    @kiondrefinner3931 2 ปีที่แล้ว +1

    im so late to the party, this isnt free anymore but is there any way i can get this cheat sheet

    • @InsideTheSquare
      @InsideTheSquare  2 ปีที่แล้ว

      You can still get the mobile codes cheat agent for free! Head on over to insidethesquare.co/mobile and you’ll see a link to grab that PDF.

  • @magdiel007
    @magdiel007 ปีที่แล้ว

    Why do photos not even show up in mobile. Mine just disappear?

    • @InsideTheSquare
      @InsideTheSquare  ปีที่แล้ว +1

      If this feature isn’t working the way mine is in the video, you definitely need to contact the official Squarespace support team. You can find more info on how to reach them at support.squarespace.com

  • @michelleyoung292
    @michelleyoung292 4 ปีที่แล้ว

    I cannot seem to get this to work with my 7.1 site. Is this correct? @media only screen and (max-width: 640px){.section-background .section-background-overlay {opacity:1important}}

  • @kelseyshirriff8223
    @kelseyshirriff8223 4 ปีที่แล้ว

    Thanks for this awesome tutorial, any chance you could upload the code for the overlay? It's not working in my Squarespace 7.1 site :( I'm also curious how you would make this work for just one particular section of a page? Thank you!!! -K

    • @InsideTheSquare
      @InsideTheSquare  4 ปีที่แล้ว

      Hey Kelsey - the overlay goes by the code name ".section-background-overlay" and you can isolate individual sections by data section id or nth-child pseudo class. This tutorial has some more info for ya on that second approach (insidethesquare.co/squarespace-tutorials/gradient-sections)
      Which ever code you go with, make sure to nest what you do in a mobile media query from this tutorial so it only applies to mobile :)

  • @kasperkorea
    @kasperkorea 4 ปีที่แล้ว

    Wonderful videos. Is there any way to completely remove the mobile scaling. My website in very intricate with lots of spacers and creative functions, which simply translates awful on the mobile. My audience will be 90% computer users for sure, so I simply need the mobile version to present the exact same as the desktop. I do not mind users having to zoom in and out to get where they need to get to.

    • @WhitneyKrenek
      @WhitneyKrenek ปีที่แล้ว

      Did you ever find out how to do this? I am currently trying to do the same

  • @g30rg3-c5
    @g30rg3-c5 2 ปีที่แล้ว +1

    Yeah great help but this defeats the reason why you would use Squarespace in the first place. It supposed to be easy and no code - right?

    • @InsideTheSquare
      @InsideTheSquare  2 ปีที่แล้ว

      Hahaha - ther are plenty of reasons to use Squarespace, and I think it can look great without any code at all. But not everyone is happy with out-of-the-box templates, so for those of us that want to add a little extra magic, CSS can make it look even more amazing ;)

  • @lifepure9602
    @lifepure9602 3 ปีที่แล้ว

    I thought cheatsheet is free:(

    • @InsideTheSquare
      @InsideTheSquare  3 ปีที่แล้ว

      This mobile code freebie is - just like the video says, head to insidethesquare.co/mobile for all kinds of free mobile codes and tutorials galore, all for free because I am nice like that. It’s the 60+ one that isn’t free, but that’s all my code secrets, not just the mobile ones.

  • @Realtor_BSample
    @Realtor_BSample 4 ปีที่แล้ว

    I have created an image on photoshop, but the size is too large to properly fit my banner image. I have been trying to figure out what presets dimension should i save my photoshop image. It crops really bad on the mobile view, and i really need help.. thank you!!! If you look at the website desktop vs mobile you'll be able to see the difference.
    Jusblush.com

  • @kash2011
    @kash2011 4 ปีที่แล้ว

    Can slider also have mobile version size?? This is the website I have created but, I don't know to adjust the size of it to mobile version. www.mindwellbd.com/
    Please give some feedback to improve.

  • @Heavenig
    @Heavenig 3 ปีที่แล้ว

    love ur tat

  • @User_jessy
    @User_jessy ปีที่แล้ว

    Hi ,can you make a video on how to add variant color swatches to squarespace?

    • @InsideTheSquare
      @InsideTheSquare  ปีที่แล้ว +1

      Great idea! I'll add that to my tutorial to do list :)

    • @User_jessy
      @User_jessy ปีที่แล้ว

      that would be awesome because there is limited information online about that topic and limited videos as well that would be a # 1 video rank on google if you made one .Iwill stay toned for your videos .Thank you your are one of the best website programmers I have seen online @@InsideTheSquare