Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adjust poster text size on mobile


BlindBetty

Question

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.

Edited by Sarah_BlindBetty
added tags
Link to post
  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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_9

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

Posted Images

20 answers to this question

Recommended Posts

  • 1
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

@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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

@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.

IMG_C32EA8F7E14A-1.jpeg

Link to post
  • 0

@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.

IMG_4207-1.jpeg

Link to post
  • 0

@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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

@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. 

Link to post
  • 0
2 minutes ago, The-Design-Order said:

@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. 

Yes If you have questions, just post to the forum and tag me, always ready to help.
If you have a lot of questions, and want to get more support, you can see my service.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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? 

 

103568127_Screenshot2020-07-29at12_02_42.thumb.png.93eb076b0981399d0749df758319c228.png2016144118_Screenshot2020-07-29at12_02_49.thumb.png.e8d571e7444e6b2ac192c8289b3a9691.png1435318604_Screenshot2020-07-29at12_03_09.thumb.png.2314c24e8d4c4a477a3fc8d9fa687c0e.png1073991620_Screenshot2020-07-29at12_03_26.thumb.png.3359accdebc6b74d805364f233879311.png

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...