Shop Categories

X

Changing text size for mobile

Home Forums Agama Pro Changing text size for mobile

Topic Resolution: Resolved
  • This topic has 6 replies, 2 voices, and was last updated 4 years ago by Zex.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #9226
    Mark Roberts
    Participant

    Hi there,

    Is it possible to have a different font size for mobile.
    Our H1 title sizes are fine on tablets, laptops and desktops, but these are very large on small Mobile screens.

    Thanks,
    Mark Roberts

    #9241
    Zex
    Moderator

    Hello, Mark!

    Yes, it is possible.
    Actually, You did not write what title you would like to change (Site title or slider title) so I’ll write you a solution for both.

    Insert the code below in Customise->General->Additional CSS

    For the Site title:

    @media screen and (max-width: 600px){
    #masthead .site-title a {
        font-size: 12px!important;}
    }
    

    For the Slide title:

    @media screen and (max-width: 600px){
    #agama_slider  h2.slide-title {
     font-size:12px!important;
    }
    }

    Change the font-size value per your needs.

    https://prnt.sc/jjwqf6

    Can you give me your website address?

    Regards

    #9247
    Mark Roberts
    Participant

    Thanks Zex,

    I’ll implement the css on the site title.

    #9254
    Mark Roberts
    Participant

    Hi again Zex,

    I have problems implementing the change.
    i only want to make the h1, h2, h3 etc. smaller for mobile screens.
    Problem is if I add this to your css it doesn’t look right.
    This is what I tried

    @media screen and (max-width: 600px){
    h1, h2, h3 {
        font-size: 12px!important;}
    }

    But then it start playing around with the titles on the sliders as well.

    If I try just adding h1, h2 and h3 to the css as is it doesn’t have effect on the text in mobile.

    @media screen and (max-width: 600px){
    #masthead .site-title a, h1, h2, h3 {
        font-size: 12px!important;}
    }

    I would just like to change the h1, h2 and h3 sizes in the text on the pages.

    link to website: blueberryhill.be

    Thanks again,
    Mark

    #9258
    Zex
    Moderator

    Hello Mark!

    Try to add next code:

    @media screen and (max-width: 600px){
    .site-content h1, h2, h3 {
        font-size: 12px!important;}
    }

    Regards

    #9289
    Mark Roberts
    Participant

    Thanks Zex,

    works perfectly 🙂

    #9292
    Zex
    Moderator

    Hi,

    I’m glad to we solved it 🙂

    Best Regards

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.