Jump to content

Custom code to downsize images for mobile view

Recommended Posts

Site URL: https://www.creativeblueprintdesign.com/brands

Hi,
I added Custom CSS Code (thanks to someone awesome here) to my SquareSpace CSS code under Home > Design > Custom CSS and the quotation mark size on my homepage (https://www.creativeblueprintdesign.com/home-1) is now PERFECT when being viewed on mobile and not too large. 

However, I have the same situation on multiple pages, like on the brands page, journals, books and new portfolio page

https://www.creativeblueprintdesign.com/brands

https://www.creativeblueprintdesign.com/journals

https://www.creativeblueprintdesign.com/books

https://www.creativeblueprintdesign.com/portfolio-1

What do I have to add to my CSS code to also make sure those quotation marks resize the same as the one on the homepage? 

I believe it has to do with the block IDs but I am not sure how to add more to the code properly or how to find them on those pages. Also, will those ID block numbers change, if I move the quote up or down on the page?

Also, I hope I even added the CSS code to the right place on SquareSpace but it worked. 


Another smaller issue that I need help with is that on the Home-1 page, the brands, and book design page, under the portfolio reels, the text "View my full Portfolio here" is just so far away from it and I would love for it to be closer to it. This will become a link in the future. 

Please ignore the general styling, as the right fonts have not been applied yet while I am working on the site.

Thank you,

Susi

Screen Shot 2022-02-26 at 10.14.20 AM.png

Link to comment
  • Replies 3
  • Views 287
  • Created
  • Last Reply

Top Posters In This Topic

Hi @tuanphan.

Thanks for replying. It's the same image on all those pages, this pink big quotation mark. Let me paste it here.

1886664344_ScreenShot2022-02-07at11_04_38AM.thumb.png.5f695bf02516ef67e7364f68e4567868.png
You can see that it's already working on the homepage. Now I just need it to resize on the other pages as well. I figure I need to add the image block IDs or something to the CSS code that is working for the homepage, I just don't know how to add it or where to find the image IDs

Thanks,
Susi

Link to comment
On 2/28/2022 at 8:29 PM, Susi_GraphicDesigner said:

Hi @tuanphan.

Thanks for replying. It's the same image on all those pages, this pink big quotation mark. Let me paste it here.

1886664344_ScreenShot2022-02-07at11_04_38AM.thumb.png.5f695bf02516ef67e7364f68e4567868.png
You can see that it's already working on the homepage. Now I just need it to resize on the other pages as well. I figure I need to add the image block IDs or something to the CSS code that is working for the homepage, I just don't know how to add it or where to find the image IDs

Thanks,
Susi

Add to Design > Custom CSS

/* resize quote image on mobile */
@media screen and (max-width:767px) {
/* journals */
div#block-40f720ad897122564413 {
    width: 30%;
    margin: 0 auto;
    padding-bottom: 0px !important;
}
/* brands */
div#block-1787f116911d83d2c802 {
    width: 30%;
    margin: 0 auto;
}
}

Do similar, use this tool to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.