Need custom code to downsize images for mobile view

Site URL: https://www.creativeblueprintdesign.com/home-1

Hi,
I am struggling with a few things on this page. While it's still not finished and the right fonts haven't been applied yet, the pink quotation mark picture, half way down and my picture (the one in the circle higher up) are appearing gigantic on mobile view. I'd love for them to be smaller on mobile view just like they are on desktop view. Any help is much appreciated.

The pink quotation mark is just gigantic on mobile. 
You can see how my face is gigantic on mobile. I'd like it to be smaller in this area on mobile. 

Also, I don't know how to change the "View my full portfolio here" right above the pink quotation mark to be closer to the slideshow to not have so much space above it. There is especially a lot of space above it on desktop view. On mobile it's better but then the pink quotation mark is too close.
In this case, I don't know how to add text right below the reel and opted to add a new section below which creates that space even at the "Smallest" section height setting. Any thoughts are much appreciated.

In this picture you can see how there is so much space below the reel and I'd like it to sit closer to the reel and further away from the quotation marks. While spacers work to get more space above the quotation mark on desktop, it won't work on mobile, but ultimately, I am still not getting the "view my full portfolio" closer to the reel.

Thanks,
Susi

Hi @Susi_GraphicDesigner

Add this to Custom CSS

/*Reduce bottom padding on Gallery Reel*/
	[data-section-id="616f34f81c1b653b4be9619d"].gallery-reel[data-width="full"]{
 		 padding-bottom:10px;
}

@media only screen and (max-width: 768px){
	/*Resize Profile Image on Mobile*/
	#block-yui_3_17_2_1_1634676566210_22589.sqs-block-image .design-layout-inline .intrinsic  {
  		max-width:180px !important;
	}
  
	/*Resize Quotation image on Mobile*/
	#block-dd0c97de38e440742169.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
  }

@meganheath 
Hi Megan. Thank you so much! 
I'll give it a try. 

Do I need to change any of the wording or is it all ready to go?
It's been a while since I coded anything.

Thanks,
Susi

 

Hi @Susi_GraphicDesigner

You can paste it as is. I've added all the correct IDs from your site 🙂

Let me know how you get on.

@meganheath
You are a genius!!

I just added it to my Squarespace CSS code under HomePage > Design > Custom CSS and the picture of myself and the quotation mark on the homepage are PERFECT now on mobile too. I hope that was the right place to add it and if you have a suggestion where it should go otherwise, please let me know. But it worked!!!!

Thank you so much. I was hoping it would resize the same quotation mark on my sub pages as well (none of them that use it are linked yet on my home page, but here's one for example www.creativeblueprintdesign.com/books

I can't figure out in the code, what I would have to do to make that a site-wide change. Do you know how?

The padding under the portfolio didn't seem to change much, but that was the least of my concerns. I am SOO happy about the smaller quotation mark and having the picture of myself smaller. 

I truly appreciate it! Thank you!

Susi

Hi @Susi_GraphicDesigner

Each image block as a unique ID so you'd need to add this ID to the code every time you want to target a new image. 

An alternative is to add the quotation as a Gallery Block and set the style too Carousel. I find this type of block works best for smaller images on mobile devices. 

If this doesn't work for you then let me know which pages have the quotation mark image and I'll write the code.

@meganheath

Hi Megan!

I kinda thought so too and need to figure out how to find those IDs but I have an idea and will give it a try by using developer mode with split screen to find those Block IDs. Thank you. Do I repeat that block of code with the next ID number, or do I add commas? I am sure I can figure it out somehow.

And OH that's another great tip to use the Carousel. I will definitely give that a try as well. 

You are the best and I'll keep you posted. Thanks so much again. 

I'd love to connect with you on Instagram to stay in touch if you'd like. Lmk. 

@meganheath
Hi Megan,

I am about to lose my mind trying to find the block IDs. haha

If you can give me a tip of how to find them easily in Squarespace (if that's a thing) let me know but I went through developer mode on my browser and it was impossible for me to find the right ones.

Here are the pages that have the pink quotation marks:

https://www.creativeblueprintdesign.com/brands

https://www.creativeblueprintdesign.com/journals

https://www.creativeblueprintdesign.com/books

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

The Books and Journal page also have the "portfolio" phrase that has too much padding below like it was on the home page before as well that you gave me code for as well. 

Again thank you so much. I truly appreciate it!

Susi

Hi @Susi_GraphicDesigner

You don't need to use developer mode to find block ID's. Here's a helpful article by Will Myers on how to find block ID's using the Chrome Inspector tool or a chrome extension. Hope this help.

To target the quotation images on the other pages replace the original code I gave you with this...

/*Reduce bottom padding on Gallery Reel*/
	[data-section-id="616f34f81c1b653b4be9619d"].gallery-reel[data-width="full"]{
 		 padding-bottom:10px;
}

@media only screen and (max-width: 768px){
	/*Resize Home page Profile Image on Mobile*/
	#block-yui_3_17_2_1_1634676566210_22589.sqs-block-image .design-layout-inline .intrinsic  {
  		max-width:180px !important;
	}
  
	/*Resize Home Page Quotation image on Mobile*/
	#block-dd0c97de38e440742169.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Brands Page Quotation image on Mobile*/
	#block-1787f116911d83d2c802.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Journals Page Quotation image on Mobile*/
	#block-40f720ad897122564413.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Books Page Quotation image on Mobile*/
	#block-8e91dff71f53543a506d.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Portfolio-1 Page Quotation image on Mobile*/
	#block-6159e64c42253c7b6894.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
  }

@meganheath

You are truly awesome. Thanks so much.

I loved learning how to find the ID blocks. Super cool video. Thank you. Definitely saving that one.

The homepage quotation mark seems to downsize much smaller now, not sure why. The code seems to be the same as before... I don't mind it.. just weird how it differs to the other pages. 

So I tried my luck at adding new code for the "view my full portfolio here" under the gallery reels on other pages to also get closer to the gallery... but it doesn't seem to work. Did I use the wrong IDs?

Check out my lovely coding for those.. hehe

 /*Reduce bottom padding on Gallery Reel on Brands Page*/
    [data-section-id="61ec30b033379463d567ed22"].gallery-reel[data-width="full"]{
          padding-bottom:10px;
}

/*Reduce bottom padding on Gallery Reel on Books page*/
    [data-section-id="619a6e8f77743644fdf97fe3"].gallery-reel[data-width="full"]{
          padding-bottom:10px;
}

/*Reduce bottom padding on Gallery Reel on Journals page*/
    [data-section-id="61ec6689833da51564c1a64c"].gallery-reel[data-width="full"]{
          padding-bottom:10px;
}
 

4 minutes ago, Susi_GraphicDesigner said:

@meganheath

You are truly awesome. Thanks so much.

I loved learning how to find the ID blocks. Super cool video. Thank you. Definitely saving that one.

The homepage quotation mark seems to downsize much smaller now, not sure why. The code seems to be the same as before... I don't mind it.. just weird how it differs to the other pages. 

So I tried my luck at adding new code for the "view my full portfolio here" under the gallery reels on other pages to also get closer to the gallery... but it doesn't seem to work. Did I use the wrong IDs?

Check out my lovely coding for those.. hehe

/*Reduce bottom padding on Gallery Reel on Homepage*/
    [data-section-id="616f34f81c1b653b4be9619d"].gallery-reel[data-width="full"]{
          padding-bottom:10px;
}

 /*Reduce bottom padding on Gallery Reel on Brands Page*/
    [data-section-id="61ec30b033379463d567ed22"].gallery-reel[data-width="full"]{
          padding-bottom:10px;
}

/*Reduce bottom padding on Gallery Reel on Books page*/
    [data-section-id="619a6e8f77743644fdf97fe3"].gallery-reel[data-width="full"]{
          padding-bottom:10px;
}

/*Reduce bottom padding on Gallery Reel on Journals page*/
    [data-section-id="61ec6689833da51564c1a64c"].gallery-reel[data-width="full"]{
          padding-bottom:10px;
}
 

 

 

Hi @Susi_GraphicDesigner

I just realised there was a formatting issue in the second set of code I posted. I've updated it so please replace with the following

/*Reduce bottom padding on Gallery Reel*/
	[data-section-id="616f34f81c1b653b4be9619d"].gallery-reel[data-width="full"]{
 		 padding-bottom:10px;
}

@media only screen and (max-width: 768px){
	/*Resize Home page Profile Image on Mobile*/
	#block-yui_3_17_2_1_1634676566210_22589.sqs-block-image .design-layout-inline .intrinsic  {
  		max-width:180px !important;
	}
  
	/*Resize Home Page Quotation image on Mobile*/
	#block-dd0c97de38e440742169.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Brands Page Quotation image on Mobile*/
	#block-1787f116911d83d2c802.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Journals Page Quotation image on Mobile*/
	#block-40f720ad897122564413.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Books Page Quotation image on Mobile*/
	#block-8e91dff71f53543a506d.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
	/*Resize Portfolio-1 Page Quotation image on Mobile*/
	#block-6159e64c42253c7b6894.sqs-block-image .design-layout-inline .intrinsic {
 		 max-width:80px !important;
	}
  }

Your code looks good 🙂 Well done. I think the issue is that the height of the sections where  you've placed "View my full Portfolio here" are different. On the Homepage the section height is custom while on the other pages it's set too small. Adjust your section height to the lowest option (10px I think) and see if this makes a difference.

Hope this solves it.

@meganheath

Hi Megan,

very cool... and you are right about the section heigh setting and it works now. I learned so much from you. Thanks so much for helping me!!

Susi