Custom code to downsize images for mobile view

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

Hi. Which image you want to reduce size on mobile?

https://www.creativeblueprintdesign.com/brands

Hi @tuanphan.

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

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

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.

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