Get FREE access to my Private Facebook Group and a FREE eBook outlining the 5 steps you can accomplish right now to take your Squarespace Website to the next level 👉 www.rebeccagracedesigns.com/squarespace-tips-and-tricks
Rebecca, Thank you for taking the time to make this video and other content. You've certainly earned another subscriber. It was well explained and kept updated. Much appreciated.
Hi Rebecca, thanks for your great video - does this work for the images in a summary block which is pulling from a blog section? I'm pretty sure I've got the right collection ID but changing the percentage doesn't seem to have any effect on the image size and they list down the page hugely. Thanks in advance.
Hey Rebecca - this was awesome thank you so so much - I do have an image that I want to make bigger on the mobile view - and as you said above 100% it shifts to the right - is there anything I can do to make this centered? thank you Emma x
hi - this is great, thanks! Worked like a charm - one thing to note is that it doesnt work if the image is set as POSTER. It needs to be set as an inline image type :) otherwise if it is a poster, it resizes the block and clips the image inside. thanks so much!
Hi, this was great thanks. Is it possible to 7.1 to make the images side by side in mobile view like on 7.0 rather than just smaller but still one big long list of products. Thanks
Hello Gemma. It depends on the images you are trying to change. I do have a video on how to get products side by side. You can check it out at ruclips.net/video/_YZkrup2GM4/видео.html
Hey Rebecca, is there a way to apply this to the background banner images so that they're all way smaller and show fully on the mobile view? I saw your blog post about changing to different images. I'm hoping making the existing ones smaller would work. Thanks!
Hey Rebecca, really grateful for your work. I've done it and it works, but not for a specific image that I have already used code to show a second image on hover. Is it possible to resize this image?
It would depend on the code you used to show the second image. You would have to use the same selector in between the mobile breakpoint. I would be happy to help you with Mobile Optimization during a 1:1 Coaching Call. You can find out more at www.rebeccagracedesigns.com/coaching
Thanks Rebecca. Very helpful! Is there a way to change an image in the footer side wide? So change the size of one image that appears in the footer alone across all pages?
You can use a similar method to resize videos but you would need to change the selector. I would be happy to help during a 1:1 Help Session. You can find out more that www.rebeccagracedesigns.com/coaching
Great video. I have trouble applying this code. I have two landscape images as a slide show mode on my home page but on Phone version of 7.1, I can not manage to resize them. In these two images I need to see the full image but to phone version all I see is the half/ cropped image. What can I do?
@@RebeccaGraceDesigns thank you! I just copied and pasted the for phones portion you put down on your website so the media is there. not too sure why it’s not working but thank you regardless I’ll try again
Beautiful tutorial. Thank you so much! Does the technique for resizing a single image work to hide and image on mobile if you set its width to 0%? If not, is it possible to hide an image on mobile any other way? Tha
@@RebeccaGraceDesigns Hi Rebecca, I've been trying for hours to make the logo in the footer smaller on mobile as it is HUGE and I'm not sure what I'm doing wrong. If you wouldn't mind please could you write the correct code in a comment? I would reallyyy appreciate it if it's not too much trouble. Thanks!
You can add the collection id of the pages in front. So the code would look something like #collection-id, #collection-id , #collection-id .sqs-block-image { width: 80%; margin: 0 auto; } }
Hi! Thanks so much for this great tutorial!! I was wondering how I get this feature to work across several pages on a site - I have used it on one page and it worked really well but when I went to repeat the technique to reduce the size of images on another page it would not work? Do you have any idea why this might be? Thank you Em xx
You should be able to repeat this process for multiple pages. It could be that the images on that page are not from Image Blocks. It is a slightly different process for galleries and product images.
Will this work for hight as well? I'm using full width images across the site. I just need to change the hight. I'm not exactly sure what type of image though. (i.e. which of your tutorials to use). I create a new section, choose the image with text option, and add an image. The image is at the top of the page but I would say it's a banner image necessarily. It's just a regular full width image.
With full width images, Squarespace automatically prioritizes width over height. If you are not happy with the way Squarespace is cropping your full width image when on mobile, I have a video on changing the background image to a different image when on mobile.
Hey Rebecca, great video! I am currently in the process of setting up my Squarespace store and with someone with no CSS knowledge (I've tasked myself to learn at least the basics) this is super helpful! I've just subscribed also so keep up the good work! I wanted to ask, if you have an idea of how to not only resize the images on mobile/tablet but to actually get them size by size (horizontal) on my 'Shop' page. Thanks in advance!
Hello Esther! I am glad you are enjoying my videos and thank you for the subscribe! Squarespace has all of the blocks automatically stack when being viewed from a mobile device. So, it doesn't really matter how small you make the images, you would need to apply some flex code to rework the sections. I haven't looked into this for the Shop page specifically. However, I did just release a video on how to have two sections go beside each other (see add text beside a gallery video). Maybe you could reuse some of this code?
Rebecca Grace Designs Great, thank you. I will try it out. If you have any videos in aligning images to centre in mobile that’d also be helpful. Thank you ever so much!
Hi I'm having this exact problem and I'm really struggling with it despite having a decent understanding of css. I copied and pasted your media queries and code blocks like you did in this video and it isn't changing any of the sizing like in this video. Even the global change isn't doing anything when I play with the percentage, it's as if the targeting isn't working (even for .sqs-block-image). Any help would be appreciated, thanks!
It sounds like your code may be broken somewhere. If you like, I do offer 1 on 1 online help sessions. You can find out more at rebeccagracedesigns.com/coaching
Do you have a solution for when the banner image shrinks in width on mobile? If I turn off the parallax feature it’s returned to normal size, but I actually like this feature on desktop view.
Hello. I do have a video on changing the banner image to a different image when viewed from a mobile device. However, it would not have the parallax effect. www.rebeccagracedesigns.com/blog/mobile-banner-image-squarespace
Hey Rebecca! I'm coding a landing page for my website, and on my desktop it looks fine, on mobile it looks squished. I made a separate video for mobile that fits perfectly, but when I swap out the code it makes the desktop version look stretched. so now I'm trying to code the original desktop version I made to be a different size when it plays on mobile, and I'm having some struggles. do you have any tips?
Hello! I would be happy to help you with this during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
HI!, I am not experienced in coding at all and I am trying to follow along with the video however every time i try to enter the code in the custom css I receive a message that says variable @mobile is undefined PLEASE HELP!!!
Hi Rebecca, great videos you have! Thank you! I was so excited to find a solution for this. I have an issue though. The changes were made when I am in the editing mode on my Squarespace account but they didn't appear on the mobile device. I wonder why? I tried to several times. Did I do anything wrong? (i mixed instructions on this video with another one of yours because the mobile breakpoint here didn't work for me for some reason.) @media only screen and (max-width: 640px) { /* Insert Code for Mobile Below This Line*/ #block-bb9f9894e5db003e7aea { width: 60% !important; margin: 0 auto; } /* Insert Code for Mobile Above This Line */ }
Your code looks good. It's possible that your phone was showing you the old version of your site due to cookies. Try deleting your history on your phone or looking at your site in a private window.
For my image it was the yui number. "block- yui number". I almost disliked the video when I kept looking passed it. I'm guessing when it's an uploaded image that doesn't apply here. Thanks for the help
Hello Ahve. Sorry for the confusion. Yes the block id will have yui in the code but you do not want to select the one that is just yui--number. It must say block-yui.
Hello Ahve. Sorry for the confusion. Yes the block id will have yui in the code but you do not want to select the one that is just yui--number. It must say block-yui.
Sorru but will this work for product images? I cant seem to get my product images to resize properly on mobile so they end up cropped badly! It's killing my sales :(
These should resize automatically with squarespace. However, you can use this code to make them even smaller. You will need to change the selector to be the class of the product image. I will add this to the blog list, subscribe so you don't miss it!
Make sure you use all of the code provided in the video. It sounds like you are missing the beginning of the mobile breakpoint code where the mobile dimensions are defined.
No matter what I did it didn’t work. I was on I chrome book so I switched to a hp laptop and it still didn’t work. I’m on 7.1 and I don’t know why it doesn’t work
Hello Vaylen! It is hard to tell without seeing the code. I would be happy to help you during a 1:1 Help Session. You can find out more at www.rebeccagracedesigns.com/coaching
How is this so bad. Just have options to resize images for the respected format (mobile or desktop). Don't have one size for desktop and mobile. DO BETTER DEVELOPERS!
@@RebeccaGraceDesigns It does have its perks and I like the direction of having no templates but after building a few sites for clients I noticed that customization is quite limited compared to 7.0 sadly. Some people say its just Beta, or Squarespace lite...hopefully they will bring out 8.0 soon and improve on what they have and listen to the Squarespace Expert community. (I'm a Squarespace Expert btw) anyway, thanks for the vid/code you are doing a great job :-)
@@captainstarman8724 I agree. I am loving some of the features (like being able to add sections and edit them all in one) but I do seem to need more CSS for customization than I did in 7.0. Glad you are enjoying the videos!
Get FREE access to my Private Facebook Group and a FREE eBook outlining the 5 steps you can accomplish right now to take your Squarespace Website to the next level 👉 www.rebeccagracedesigns.com/squarespace-tips-and-tricks
Lifesaver! 7.1 is gruesome, many thanks for these very clear tips.
You're welcome!
Rebecca,
Thank you for taking the time to make this video and other content. You've certainly earned another subscriber. It was well explained and kept updated. Much appreciated.
No problem! Welcome aboard!
Great video which is so so helpful. Finally I feel like I can control my Squarespace websites! THANK YOU
You're very welcome! Great to hear.
Hi Rebecca, thanks for your great video - does this work for the images in a summary block which is pulling from a blog section? I'm pretty sure I've got the right collection ID but changing the percentage doesn't seem to have any effect on the image size and they list down the page hugely. Thanks in advance.
No, this code is for image blocks only which you can now do in Fluid Engine without code.
Thank you so much! This video was exactly what I needed and was insanely helpful.
Glad it was helpful!
Hey Rebecca - this was awesome thank you so so much - I do have an image that I want to make bigger on the mobile view - and as you said above 100% it shifts to the right - is there anything I can do to make this centered? thank you Emma x
Try adding a negative margin on the left. Just be careful because you may end up having your website go past the viewing screen.
@@RebeccaGraceDesigns how do i add the negative margin on the left?
hi - this is great, thanks! Worked like a charm - one thing to note is that it doesnt work if the image is set as POSTER. It needs to be set as an inline image type :) otherwise if it is a poster, it resizes the block and clips the image inside. thanks so much!
Thanks for the info!
Hi, this was great thanks. Is it possible to 7.1 to make the images side by side in mobile view like on 7.0 rather than just smaller but still one big long list of products.
Thanks
Hello Gemma. It depends on the images you are trying to change. I do have a video on how to get products side by side. You can check it out at ruclips.net/video/_YZkrup2GM4/видео.html
Finally a video that actually helps me do what I want. Thank you!
Glad I could help!
incredible tutorial! thank you!!
You're very welcome!
Thank you so much this was super helpful. Can I add a line of code to left or right align my image on mobile? Thanks in advance.
Hello Charline! Yes you can. Leave out the margin left and right part of the code, which centers the image.
Hey Rebecca, is there a way to apply this to the background banner images so that they're all way smaller and show fully on the mobile view? I saw your blog post about changing to different images. I'm hoping making the existing ones smaller would work. Thanks!
Hello! Unfortunately, I have not found a way to resize the background images. The workaround to that was to replace the image with a mobile version.
This was so helpful. Keep up the great content. I was ready to give up on my site. Lol. Thanks Rebecca!
Glad it was helpful!
Hey Rebecca, really grateful for your work. I've done it and it works, but not for a specific image that I have already used code to show a second image on hover. Is it possible to resize this image?
It would depend on the code you used to show the second image. You would have to use the same selector in between the mobile breakpoint. I would be happy to help you with Mobile Optimization during a 1:1 Coaching Call. You can find out more at www.rebeccagracedesigns.com/coaching
@@RebeccaGraceDesigns Thank you so much for your answer. I've already solved it :)
Awesome tutorial :) Finally worked for my website, thanks!
Glad it helped!
Thanks Rebecca. Very helpful!
Is there a way to change an image in the footer side wide?
So change the size of one image that appears in the footer alone across all pages?
Yes. To change any specific image site-wide, you can use its block id.
Great video. Is it possible to only resize videos?
You can use a similar method to resize videos but you would need to change the selector. I would be happy to help during a 1:1 Help Session. You can find out more that www.rebeccagracedesigns.com/coaching
How do I change the image sizes for the footer?
You can use this code but add the word footer at the start.
Great video. I have trouble applying this code. I have two landscape images as a slide show mode on my home page but on Phone version of 7.1, I can not manage to resize them. In these two images I need to see the full image but to phone version all I see is the half/ cropped image. What can I do?
You can adjust the height on mobile using code but unfortunately it may still crop the images.
Hello! Thank you for this video!! Do you happen to know why mine says “@mobile is undefined” ?
It sounds like you are missing the beginning of the media query. Make sure you use all of the code provided.
@@RebeccaGraceDesigns thank you! I just copied and pasted the for phones portion you put down on your website so the media is there. not too sure why it’s not working but thank you regardless I’ll try again
Beautiful tutorial. Thank you so much! Does the technique for resizing a single image work to hide and image on mobile if you set its width to 0%? If not, is it possible to hide an image on mobile any other way? Tha
Nevermind, got it! Used the code:
#block-8fc91e9563250a77172c {
display: none;
}
Yep! This is exactly what you would do!
Hi Rebecca, great video! Does this apply for an image in the footer?
Yes, absolutely
@@RebeccaGraceDesigns Hi Rebecca, I've been trying for hours to make the logo in the footer smaller on mobile as it is HUGE and I'm not sure what I'm doing wrong. If you wouldn't mind please could you write the correct code in a comment? I would reallyyy appreciate it if it's not too much trouble. Thanks!
Ignore the above, I have resolved it :) thanks!
Argh! I have been trying to sort this out for days! Life saver! Thank you!
Glad I could help!
Hi! Is there a way to disable mobile view completely using css? In 7.1 there's no way to currently do this I don't think
I'm sure it is possible but I do not recommend this. Having a Mobile Friendly Site is extremely important for your SEO.
Great video, however, what can I do if I want to change image sizes of multiple pages but not all the pages?
You can add the collection id of the pages in front. So the code would look something like
#collection-id, #collection-id , #collection-id
.sqs-block-image {
width: 80%;
margin: 0 auto;
}
}
@@RebeccaGraceDesigns Thank you so much!🙏🏻
Very helpful. Thank You!
You're welcome!
Hi! Thanks so much for this great tutorial!! I was wondering how I get this feature to work across several pages on a site - I have used it on one page and it worked really well but when I went to repeat the technique to reduce the size of images on another page it would not work? Do you have any idea why this might be? Thank you Em xx
You should be able to repeat this process for multiple pages. It could be that the images on that page are not from Image Blocks. It is a slightly different process for galleries and product images.
Will this work for hight as well? I'm using full width images across the site. I just need to change the hight. I'm not exactly sure what type of image though. (i.e. which of your tutorials to use). I create a new section, choose the image with text option, and add an image. The image is at the top of the page but I would say it's a banner image necessarily. It's just a regular full width image.
With full width images, Squarespace automatically prioritizes width over height. If you are not happy with the way Squarespace is cropping your full width image when on mobile, I have a video on changing the background image to a different image when on mobile.
this was perfect. thank you
You're so welcome!
This worked! Thank you.
Great to hear!
Is it possible to make it that multiple images are shown in mobile view per line instead of one at a time?
Hello Alex. It would depend on how the images are laid out. I would look a using a Grid Gallery Section or Block and then you may not need code.
Does anyone know how to make a table/chart mobile friendly?
Mine looks horrendous on mobile. Please help!
Hello Jose. Is the table or chart in an image? I would suggest using a series of stacked image blocks or a code block to create the table instead.
@@RebeccaGraceDesigns it is actually a block of code and I convert it from word to HTML
Hey Rebecca, great video! I am currently in the process of setting up my Squarespace store and with someone with no CSS knowledge (I've tasked myself to learn at least the basics) this is super helpful! I've just subscribed also so keep up the good work!
I wanted to ask, if you have an idea of how to not only resize the images on mobile/tablet but to actually get them size by size (horizontal) on my 'Shop' page. Thanks in advance!
Hello Esther! I am glad you are enjoying my videos and thank you for the subscribe! Squarespace has all of the blocks automatically stack when being viewed from a mobile device. So, it doesn't really matter how small you make the images, you would need to apply some flex code to rework the sections. I haven't looked into this for the Shop page specifically. However, I did just release a video on how to have two sections go beside each other (see add text beside a gallery video). Maybe you could reuse some of this code?
Rebecca Grace Designs Great, thank you. I will try it out. If you have any videos in aligning images to centre in mobile that’d also be helpful. Thank you ever so much!
Hi I'm having this exact problem and I'm really struggling with it despite having a decent understanding of css. I copied and pasted your media queries and code blocks like you did in this video and it isn't changing any of the sizing like in this video. Even the global change isn't doing anything when I play with the percentage, it's as if the targeting isn't working (even for .sqs-block-image). Any help would be appreciated, thanks!
It sounds like your code may be broken somewhere. If you like, I do offer 1 on 1 online help sessions. You can find out more at rebeccagracedesigns.com/coaching
Do you have a solution for when the banner image shrinks in width on mobile? If I turn off the parallax feature it’s returned to normal size, but I actually like this feature on desktop view.
Hello. I do have a video on changing the banner image to a different image when viewed from a mobile device. However, it would not have the parallax effect. www.rebeccagracedesigns.com/blog/mobile-banner-image-squarespace
Hey Rebecca! I'm coding a landing page for my website, and on my desktop it looks fine, on mobile it looks squished. I made a separate video for mobile that fits perfectly, but when I swap out the code it makes the desktop version look stretched. so now I'm trying to code the original desktop version I made to be a different size when it plays on mobile, and I'm having some struggles. do you have any tips?
Hello! I would be happy to help you with this during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
HI!, I am not experienced in coding at all and I am trying to follow along with the video however every time i try to enter the code in the custom css I receive a message that says variable @mobile is undefined PLEASE HELP!!!
It sounds like you are missing the beginning of the mobile breakpoint where it defines what @media is. Make sure you use all the code provided.
Hi Rebecca, great videos you have! Thank you! I was so excited to find a solution for this. I have an issue though. The changes were made when I am in the editing mode on my Squarespace account but they didn't appear on the mobile device. I wonder why? I tried to several times. Did I do anything wrong? (i mixed instructions on this video with another one of yours because the mobile breakpoint here didn't work for me for some reason.)
@media only screen and (max-width: 640px) {
/* Insert Code for Mobile Below This Line*/
#block-bb9f9894e5db003e7aea {
width: 60% !important;
margin: 0 auto;
}
/* Insert Code for Mobile Above This Line */
}
Your code looks good. It's possible that your phone was showing you the old version of your site due to cookies. Try deleting your history on your phone or looking at your site in a private window.
For my image it was the yui number. "block- yui number". I almost disliked the video when I kept looking passed it. I'm guessing when it's an uploaded image that doesn't apply here. Thanks for the help
Hello Ahve. Sorry for the confusion. Yes the block id will have yui in the code but you do not want to select the one that is just yui--number. It must say block-yui.
Hello Ahve. Sorry for the confusion. Yes the block id will have yui in the code but you do not want to select the one that is just yui--number. It must say block-yui.
None of the code changes a single piece of formatting on my page. No idea what I’m doing wrong
Did you add the media query and check on the mobile view? It shouldn't change anything on the desktop view!
It worked thnk you..yet the photo isn't coming out as big as i'd like it. Any suggestions? Thank you
You can adjust the 80% in the code to be anywhere between 0 and 100.
AWESOME! Thank you! ❤️
No problem 😊
Sorru but will this work for product images? I cant seem to get my product images to resize properly on mobile so they end up cropped badly! It's killing my sales :(
These should resize automatically with squarespace. However, you can use this code to make them even smaller. You will need to change the selector to be the class of the product image. I will add this to the blog list, subscribe so you don't miss it!
I have now added this to my blog.. check it out at www.rebeccagracedesigns.com/blog/resize-product-images-mobile
Ah great thanks so much Rebecca!!
I'll let you know how I get on :)
Hi Rebecca, Where is the code? Cheers
There is a link in the description.
What if the error says variable @mobile is undefined?
It sounds like you are missing the beginning of the code. Make sure you use all of the code provided in the tutorial.
Hello, when I write @media @mobile it says the "variable @mobile is undefined". Could you help me, please?
Hello. Make sure you include the first part of the mobile breakpoint as well
@mobile: ~"only screen and (max-width: 640px)";
thank you so much
You're welcome!
Thank u
No problem
Thank you!!!
You're welcome!
Got it. Cheers
Glad you found it!
This is not working for me... It says "variable @mobile is undefined" when I type it in CSS. How can I solve this? :)
Make sure you use all of the code provided in the video. It sounds like you are missing the beginning of the mobile breakpoint code where the mobile dimensions are defined.
No matter what I did it didn’t work. I was on I chrome book so I switched to a hp laptop and it still didn’t work. I’m on 7.1 and I don’t know why it doesn’t work
Hello Vaylen! It is hard to tell without seeing the code. I would be happy to help you during a 1:1 Help Session. You can find out more at www.rebeccagracedesigns.com/coaching
WHy isnt this easier? What is it like 90% of the internet are mobile users?
I mean I manage to get it done but this is so not an easy way to make a website holy shit 😅
I am glad you were able to get it figured out!
How is this so bad. Just have options to resize images for the respected format (mobile or desktop). Don't have one size for desktop and mobile. DO BETTER DEVELOPERS!
7.1 sucks
I thought so at first too! Now that I have played around in it a bit more, I really like it!
@@RebeccaGraceDesigns It does have its perks and I like the direction of having no templates but after building a few sites for clients I noticed that customization is quite limited compared to 7.0 sadly. Some people say its just Beta, or Squarespace lite...hopefully they will bring out 8.0 soon and improve on what they have and listen to the Squarespace Expert community. (I'm a Squarespace Expert btw) anyway, thanks for the vid/code you are doing a great job :-)
@@captainstarman8724 I agree. I am loving some of the features (like being able to add sections and edit them all in one) but I do seem to need more CSS for customization than I did in 7.0. Glad you are enjoying the videos!