WEST THEME – RESPONSIVE PHONE/TABLET STYLING – FONT SIZE CHANGES DON'T WORK

Home Forums West WEST THEME – RESPONSIVE PHONE/TABLET STYLING – FONT SIZE CHANGES DON'T WORK

Topic Resolution: Resolved

This topic contains 10 replies, has 2 voices, and was last updated by  Kharis Sulistiyono 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1031877

    nmolenda
    Participant

    When editing a text element by trying to change font size for H2,H3,H4, etc nothing happens.

    Website is nickmolenda.com. Adding CSS code to the custom CSS field has proven ineffective. I’m trying to get the appearance of the font sizes on tablet and phone view to match the larger view (in terms of scale). It appears that once we shrink to tablet view & smaller, all header fonts revert to roughly the same size. Please help!

    #1032851

    Hello there,

    Please share the custom CSS code you’ve added, so I can replicate it on my test site and revise it.

    Regards,
    Kharis

    #1033577

    nmolenda
    Participant

    @media only screen and (max-width: 600px) {
    .dslc-content h2 {
    font-size: 80px !important;
    }
    .dslc-content h5 {
    font-size: 14px !important;
    }
    .site-description h2 {
    font-size: 9px !important;
    }
    }

    #1033922

    nmolenda
    Participant

    I should also point out that in general, I’m using the fields within Customize > fonts to adjust font sizes. They generally seem to change the font sizes in a ‘blanket’ manner without any independent control for different sizes needed for different views such as tablet and phone. Except the ‘site-description’ element, which the customization only seems to change the full-browser window view, but not tablet or phone view, which are set to an awkward looking default.

    #1034350

    Hello there,

    Try this media CSS media queries:

    
    @media only screen and (max-width:1024px) {
    
      .dslc-content h1 {
        font-size: 36px !important; 
      }
    
      .dslc-content h2 {
        font-size: 30px !important; 
      }  
    
      .dslc-content h3 {
        font-size: 24px !important; 
      }
    
      .dslc-content h4 {
        font-size: 18px !important; 
      }
    
      .dslc-content h5 {
        font-size: 14px !important; 
      }
    
      .dslc-content h6 {
        font-size: 12px !important; 
      }
      
    }
    
    @media only screen and (max-width:768px) {
      /* Your styles go here */
    }
    
    @media only screen and (max-width:600px) {
      /* Your styles go here */
    }
    
    @media only screen and (max-width:480px) {
      /* Your styles go here */
    }
    

    and add it to Appearance > Customize > Additional CSS.

    Regards,
    Kharis

    #1034762

    nmolenda
    Participant

    It appears to be ineffective. It seems like everything within the “appearance > fonts” is overriding any additional CSS. I tried deleting those values to see if that would make the additional CSS work, but it didn’t. any ideas?

    #1039084

    Hello there,

    I am sorry for the delay.

    Please share the page URL where the code doesn’t take any affect on. Please also mention the heading text, so I can be more precise.

    Regards,
    Kharis

    #1039162

    nmolenda
    Participant

    I said above it was nickmolenda.com – it should just be the main page there. The text “Drummer | Educator | Arranger | Geek” doesn’t seem to want to change size in tablet and phone mode. Also, the text above the “subscribe” Button is also limited in the customization with full, tablet, and phone mode.

    #1041574

    Hello there,

    Could you please try applying this extra custom CSS code and see if it changes anything?

    
    @media only screen and (max-width:1024px) {
      h2.site-description {
        font-size: 30px !important;
      }
    }
    
    @media only screen and (max-width:768px) {
      h2.site-description {
        font-size: 26px !important;
      }
    }
    
    @media only screen and (max-width:600px) {
      h2.site-description {
        font-size: 24px !important;
      }
    }
    
    @media only screen and (max-width:480px) {
      h2.site-description {
        font-size: 20px !important;
      }
    }
    
    

    Regards,
    Kharis

    #1041769

    nmolenda
    Participant

    This is the magic code I needed to fix EVERYTHING. Thank you so much!! 🙂

    #1042185

    You’re welcome!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.