Spend wayyyy too much time trying to customize your client's Squarespace website? 🧐 Save time and your sanity by avoiding these three COSTLY mistakes that EVERYONE makes when finding code for Squarespace 👉www.rebeccagracedesigns.com/mistakes-to-avoid
Hi Rebecca, do you have a customer CSS for retaining the original sizing/crop on mobile within the store section? I am having issues with my photo's in my store automatically cropping to 1x1 aspect ratio when I switch to mobile - TIA!
I have tried to stop the cropping on the product page before and I find that it ends up shifting the images kind of funny and causing other problems. My suggestion is to have the product images use lots of space around the product so that the product is still shown in full when cropped to the 1x1 aspect ratio.
hi, thank you so much for this, but I am currently trying and nothing is happening. You see how when you're inserting the code and changing the metrics its changes right away before saving it? it doesn't do that for me.:/
You would need to change the selector. This would depend on the set up of your site and what sections you want to target. I would be happy to help you during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
*edited* I am not sure why this is happening it looks great on mobile but when I am on desktop view, it completely blows the picture up pixelating it and making it look awful. What am I missing??
Thank you for the video! I don't know what happened, but my desktop top header menu disappeared from "Site Styles" after I applied the code. Do you perhaps know how to put it back?
Hey this works, but when I do it, my page has a horizontal scroll and you can see beyond the margins. Is there anyway to do this and keep it flush with the view width?
This was very helpful, thank you. Just one thing, after I added the custom CSS all the other banner on the site disappeared. Stylistically I'd like to still be able to using Banners further down on web pages. Is that possible with the specific code added to have a static "Banner" and to have traditional banners? Thanks!
It sounds like you have applied the code site wide. Make sure you use the first part of the code #COLLECTIONID #page .page-section:nth-of-type(1) so that it only applies to the section you want it to.
Thank you that was super helpful! I only had one issue. Now there is a horizontal scrollbar. It only disappears if I change the width to 98% or lower, but then the image does not fit the screen. Any ideas?
@@RebeccaGraceDesigns Thanks Rebecca! I still had trouble with that for some reason... I tried to reply to myself yesterday with another solution I found but utube wouldn't let me. I hope it helps someone else. /* resize home banner */ @media screen and (max-width:767px) { .homepage #page section:first-child { min-height: 20vh; } }
This works wonderfully, however like some other comments I cannot get rid of the side scroll on mobile. Not sure what is going on, I have tried a few things however maybe I am missing something :O
@@RebeccaGraceDesigns OMG You are AMAZING!!!! Thank you so much!! Now I have uncentred top sections on other pages, not sure why though :( Do you have any idea please?
It's hard to know without looking at it. I would be happy to help on a 1:1 Help Session. You can find out more and book a call at www.rebeccagracedesigns.com/coaching
hi thank you so much for the help, one last thing, do you know how to remove the scroll thingy after the codes are applied. I kinda just want my website to be flushed. Not a big deal but just annoying haha. Thanks for your help again. P.S. I tried adjusting the width but ended up making it worse :D
Ahh I see! If you are not making the image wider and you have removed all margin and padding this shouldn't happen. However, you can always add overflow: hidden; to the section.
Hmm... it's hard to know without seeing it. I would be happy to help you on a 1:1 Help Session. You can find out more and book a time at www.rebeccagracedesigns.com/coaching
What do you do with the duplicated home page when you're done? I'm not sure if I missed something. Thank you so much though because this was so helpful!
Sorry for the confusion. I duplicated the page so that you could see the difference between the usual way of adding a background image and the strategy I was suggesting. You do not need to duplicate the page when you are creating this effect.
Do you happen to know if there is a way to do this with gallery slideshow banners as well? Either way thanks a bunch for this video, it was so much help!
@@RebeccaGraceDesigns Thank you! i will try that. Alsoe I've been looking for a solution for my store because I sell prints. On the desktop and tablet view everything sames to work fine on the product layout but in mobile view my landscape images are crop and looks bad. is there any fix for that?
You can use custom css to stop the images from cropping but sometimes this makes the images really tiny. I would play with the focus so that it zooms in on a good spot.
