Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1421291

    On smaller devices, headlines are sometimes not displayed completely. Even there (https://umwelt-magazin.eu/schulmaterialien/) – You can see the result at the picture below. Can this be changed?
    On the mobile phone you can only see “Schulmaterial…” and not “Schulmaterialien”
    Picture

    • This topic was modified 1 year, 1 month ago by Tim.
    • This topic was modified 1 year, 1 month ago by Tim.
    • This topic was modified 1 year, 1 month ago by Tim.
    #1421330

    Hey Tim,

    Thank you for the inquiry.

    You can adjust the font size of the h1 element by using this css code.

    
    @media only screen and (max-width: 767px) {
    
      /* Add your Mobile Styles here */
      #top #wrap_all .header_color h1,
      #top #wrap_all .main_color h1,
      #top #wrap_all .alternate_color h1 {
        font-size: 32px;
      }
    }
    

    You can also adjust the font settings of the headings and body text in the Enfold > General Styling > Typography panel.

    Best regards,
    Ismael

    #1421548

    Thank you for your answer!
    But I have to change something in the code, don’t I? So far it doesn’t work for me. Sorry for being so stupid:)! If I wanted to set all headings to the size “h2” – what would the code look like? The change should be as effective as possible on all mobiles.

    #1421610

    Hi,

    Thank you for the update.

    Did you purge the cache before testing the page? You may have to toggle or temporarily disable the Enfold > Performance > File Compression settings as well. Please make sure to perform a hard refresh before testing the page.

    The code above should adjust the size of the h1 element. If you want to change the size of the h2 element manually, just copy the css rule above, then replace all instances of the h1 selector.

      #top #wrap_all .header_color h2,
      #top #wrap_all .main_color h2,
      #top #wrap_all .alternate_color h2 {
        font-size: 24px;
      }
    

    Or as suggested above, you can adjust the font size settings in the Enfold > General Styling > Typography panel.

    Best regards,
    Ismael

    #1421711

    Did you purge the cache before testing the page? You may have to toggle or temporarily disable the Enfold > Performance > File Compression settings as well. Please make sure to perform a hard refresh before testing the page.

    Yes, I have done that:( If I enter the following code (=>css-field), …

    @media only screen and (max-width: 767px) {
      #top #wrap_all .header_color h2,
      #top #wrap_all .main_color h2,
      #top #wrap_all .alternate_color h2 {
        font-size: 24px;
      }
    }

    it still does not work.

    • This reply was modified 1 year, 1 month ago by Tim.
    #1421771

    Hi,
    On the page that you linked to, “Schulmaterialien” is an H1 tag and your CSS is targeting H2 tags, Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field instead:

    @media only screen and (max-width: 767px) {
      #top #wrap_all #main .header_color h1,
      #top #wrap_all #main .main_color h1,
      #top #wrap_all #main .alternate_color h1 {
        font-size: 24px;
      }
    }

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1421778

    Thank you so mutch! Now it works:-)! Do you happen to know how to solve my problem here well – I just can’t manage it….

    #1421779

    Hi,
    Glad we were able to help, I will look at your other issue, it looks complicated so it may take some time. If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Headlines on mobile phones’ is closed to new replies.