Changing Font Size on Mobile Only

Site URL: https://www.nationaltab.com/

Hi all, 

Is it possible to create a code where Header 2 font on my website is slightly smaller but only on mobile? I don't want to change the font size on the desktop view of the site, but on mobile, it's too big and hyphenates many of my headers. I'm in Brine v7.0 so it's not possible to do this through the template, so I'm looking for a code. 

If anyone has any solutions, I'd greatly appreciate it!

Thanks, 

Megan

On 7/24/2021 at 2:34 AM, meganntab said:

Site URL: https://www.nationaltab.com/

Hi all, 

Is it possible to create a code where Header 2 font on my website is slightly smaller but only on mobile? I don't want to change the font size on the desktop view of the site, but on mobile, it's too big and hyphenates many of my headers. I'm in Brine v7.0 so it's not possible to do this through the template, so I'm looking for a code. 

If anyone has any solutions, I'd greatly appreciate it!

Thanks, 

Megan

Hi. IT is small here. Did you solve problem? If no, can you explain in more detail? Which text/which page?

On 7/25/2021 at 2:54 AM, tuanphan said:

Hi. IT is small here. Did you solve problem? If no, can you explain in more detail? Which text/which page?

Hi - haven't solved it yet. Here are the pages / sections where I've recorded this happening: 

Homepage:

• Experience section ("Elevating the On-Site Experience")
• Where We Work section ("National & Regional Solutions")

TAB Solutions: 

• Bottom of page, "Customized Solutions" section (NOTE: All the sub-pages in this folder - New Construction, Renew, Revive, Additional Services - have the same "Customized Solution" section at the bottom and this occurs on all them as well)

About Us:

• "The National TAB Commitment" section 

On 7/27/2021 at 6:21 AM, tuanphan said:

Try this CSS, if it works, I will send code for other sections

/* Mobile */
@media screen and (max-width:640px) {
/* Homepage text size */
div#block-54dc2afba0bc6e0c838b h2 {
    font-size: 20px;
}
/* National */
div#block-5fb2af4a927e353f84649c20 h2 {
    font-size: 30px;
}
}

 

That worked! If you can send me the code for the other sections when you have a chance, that'd be greatly appreciated. 

On 8/6/2021 at 2:17 AM, meganntab said:

That worked! If you can send me the code for the other sections when you have a chance, that'd be greatly appreciated. 

Hi,

https://www.nationaltab.com/solutions

Change font size or change image size???

On 8/8/2021 at 2:21 AM, tuanphan said:

Hi,

https://www.nationaltab.com/solutions

Change font size or change image size???

 

Font size

20 hours ago, meganntab said:

Font size

With Solutions tab, add to Design > Custom CSS

/* Solutions h2 on mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1621883816719_78819 h2 {
    font-size: 15px;
}
}

3 hours ago, tuanphan said:

With Solutions tab, add to Design > Custom CSS

/* Solutions h2 on mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1621883816719_78819 h2 {
    font-size: 15px;
}
}

 

Thank you!

@tuanphan I want to do the same thing, so I'm hoping you can help me with this same issue as well.

On my website homepage, it says "Our online FLUENCY ACCELERATOR™ course teaches you a method for becoming fluent in any language" - which is currently in Paragraph 1 font (1.2rem). However, I want te font in that specific text block to be slightly smaller (1rem) ONLY on mobile. 

Here is my website: www.diallekt.com

Could you please help? Thank you so much.

On 5/12/2022 at 9:30 AM, AaronC said:

@tuanphan I want to do the same thing, so I'm hoping you can help me with this same issue as well.

On my website homepage, it says "Our online FLUENCY ACCELERATOR™ course teaches you a method for becoming fluent in any language" - which is currently in Paragraph 1 font (1.2rem). However, I want te font in that specific text block to be slightly smaller (1rem) ONLY on mobile. 

Here is my website: www.diallekt.com

Could you please help? Thank you so much.

Add to Design > Custom CSS
 

/* Text size mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1652321734868_4479 * {
    font-size: 1em;
}}