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

Changing Font Size on Mobile Only


meganntab

Question

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

Link to comment
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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 
Link to comment
  • 0
13 hours ago, meganntab said:

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 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Link to comment
  • 0
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???

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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!

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...