Adjust poster text size on mobile

I'm wondering how to make the text in the poster blocks show up as a larger font on mobile. I want to use images with text throughout the blog posts on this site, so if there's just an easier/better way to do this than using a Poster, I'm all ears. I just want people to be able to read the text when on mobile well, as currently on desktop it's fine, but on mobile incredibly tiny.

@Sarah_BlindBetty Custom code can solve. If you share site url, i can take a look.

Site is still private but if you go to "https://orghealthcoach.squarespace.com/" and enter "quickpass" it'll let you in. I'm using poster blocks in the blog posts as well as on About > Why We Do This. Thanks much!

@Sarah_BlindBetty Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* Why we do this */
div#block-ffb38b8061957da12988 .image-card-wrapper .image-subtitle-wrapper * {
    font-size: 40px !important;
}
/* Homepage poster h2 */
div#page-5d549d47da36f300016fc63b .sqs-block-content h2 {
    font-size: 20px;
}
/* Homepage poster h3 */
div#page-5d549d47da36f300016fc63b .sqs-block-content h3 {
    font-size: 20px;
}
}

@tuanphan I've attached the result on the Why We Do This page... this enlarges the text but not the actual poster block image, so the white words just cover up the text and space surrounding it.

I'm also hoping for a solution that doesn't require an extra line of code EVERY time one of the bloggers publishes a block post with a poster block in it. Do bloggers just not use poster blocks with text in them...? Not sure how people are expected to read very tiny text on their phones.

Hey @tuanphan I am trying to do this too with no luck!

I am confused about how to find the div#page id. number to insert into your code above. I think I found the div#block id but an unsure now how to adjust the rest. 

My site is live here - https://cat-smilodon-zzgl.squarespace.com/home-page

Any direction would be amazing as the text on the mobile is tiny! Thanks so much. 

@The-Design-Order I wrote about Block ID, Page ID here. https://beaverhero.com/squarespace-how-to/

Which text you want to increase size?

@tuanphan oh great thank you. 

Although when I try it, it is giving me the same id as the block???

@media screen and (max-width:640px) {
/* home-page */
div#block-yui_3_17_2_1_1575266050435_281 .image-card-wrapper .image-subtitle-wrapper * {
    font-size: 40px !important;
}
/* Homepage poster h2 */
div#page-yui_3_17_2_1_1575266050435_281
 .sqs-block-content h2 {
    font-size: 20px;
}
/* Homepage poster h3 */
div#page-yui_3_17_2_1_1575266050435_281

 h3 {
    font-size: 20px;
}
}

It is the text below that I am hoping to increase.

@The-Design-Order 

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1573602127450_9869 .image-title-wrapper * {
    font-size: 30px !important;
}
div#block-yui_3_17_2_1_1573602127450_9869 .image-title-wrapper .image-subtitle-wrapper * {
    font-size: 30px !important;
}
}

Where poster 2 & 3?

@tuanphan you did it you amazing thing! Thank you so much. 

I have also bookmarked your website for future help. I have a few clients asking for more and more difficult SS integrations which I am sure will get to point where I can no-longer figure them out solo. I will no doubt be in touch some time in the future. 

@tuanphan

Can you work that same magic on this page (https://www.stainless-products.com/) ? The "Our Capabilities" text in the image block doesn't reduce on mobile, so it ends up cutting capabilities in half... 

1 hour ago, generalmills12 said:

@tuanphan

Can you work that same magic on this page (https://www.stainless-products.com/) ? The "Our Capabilities" text in the image block doesn't reduce on mobile, so it ends up cutting capabilities in half... 

 

Add to Home > design > Custom CSS

/* tuan -5mi */
@media screen and (max-width:640px) {
div#block-d8925de1f913c2bfa784 .image-title-wrapper p {
    font-size: 18px;
}
}

Hi @tuanphan

Thanks for all your help so far!

My text over poster images is not displaying so nicely on mobile - see images below. 

How could I change the line spacing to get the text to look bettter? 

On 7/30/2020 at 8:20 AM, atotheme said:

Hi @tuanphan

Thanks for all your help so far!

My text over poster images is not displaying so nicely on mobile - see images below. 

How could I change the line spacing to get the text to look bettter? 

Can you share link to page in screenshot? We can check easier.

@tuanphan https://www.jaiminee.com/  P:1234

3 hours ago, atotheme said:

@tuanphan https://www.jaiminee.com/  P:1234

Did you solve? See fine here.

@tuanphan - i didn't unfortunately. The text line spacing is still too large on mobile and therefore getting cut off. 

Hey @tuanphan - just checking, did you see my response? 

10 hours ago, atotheme said:

Hey @tuanphan - just checking, did you see my response? 

pass 1234 is incorrect. Can you check again?

@tuanphan I am having the same issue on my site.

https://loveintegrationyoga.squarespace.com/

Password - loveintegration

On the about us page when it goes to mobile the same problem happens. Is there a set piece of code that is applicable that I can use on other sites too as I ALWAYS come up against this problem!

I am having a similar issue if anyone is able to help that would be great! 

3 hours ago, Scott3Jensen said:

I am having a similar issue if anyone is able to help that would be great! 

Can you share site url?

@tuanphan Could I get your help with the same issue the original poster had? I have 3 image poster blocks and want to increase the title & subtitle text for Mobile View. I tried the code below for the first block and it updates when I do mobile preview on my desktop, but not on the actual mobile view. I appreciate any input!

URL: https://www.getintherapy.com
pw: test

I want to target the 3 poster blocks: "Effective": #block-4a7490a097e4efff55ad , "Transformative": #block-2d460c2b6a3c0861d06b, and "Efficient": #block-795829f2e712ec5528aa

CODE for 1st poster block (not working for subtitle text):

/*Effective*/
@media screen and (max-width:640px) {
div#block-4a7490a097e4efff55ad .image-title-wrapper * {
    font-size: 30px !important;
}
div#block-4a7490a097e4efff55ad .image-title-wrapper .image-subtitle-wrapper * {
    font-size: 25px !important;
}
}

17 hours ago, arielleneal said:

@tuanphan Could I get your help with the same issue the original poster had? I have 3 image poster blocks and want to increase the title & subtitle text for Mobile View. I tried the code below for the first block and it updates when I do mobile preview on my desktop, but not on the actual mobile view. I appreciate any input!

URL: https://www.getintherapy.com
pw: test

I want to target the 3 poster blocks: "Effective": #block-4a7490a097e4efff55ad , "Transformative": #block-2d460c2b6a3c0861d06b, and "Efficient": #block-795829f2e712ec5528aa

CODE for 1st poster block (not working for subtitle text):

/*Effective*/
@media screen and (max-width:640px) {
div#block-4a7490a097e4efff55ad .image-title-wrapper * {
    font-size: 30px !important;
}
div#block-4a7490a097e4efff55ad .image-title-wrapper .image-subtitle-wrapper * {
    font-size: 25px !important;
}
}

Add to Design > Custom CSS

/* Image posters */
@media screen and (max-width:767px) {
div#page-section-6094459da03ccb2f4a4eb397 .image-title * {
    font-size: 70px !important;
}
div#page-section-6094459da03ccb2f4a4eb397 .image-subtitle * {
    font-size: 40px !important;
}
}

Hey Folks, 

I have managed to adjust the text and button size on my homepage image. But I now want to adjust the image size on desktop to the same image but a ratio or 2:1. Can you help please 🙂