Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 12, 2020 at 3:02 pm #1222103
    frankkremer

    Hi there, I hope this request is a bit easier (I have 2 other topics open with not response yet for more than 2 days).

    I have used advanced styling to make my H1 headers big and chunky (60px, upper case) and very much like the look. But on small screens the longer words get cut off. Have also tried using quick CSS for resizing the header, but makes no difference.

    I have tried using a regular text component where I can now set the size for smaller screens within the styling settings, but it only affects body text and ignores the H1 header. It does not seem to have that option in the special header component – just the option to hide it on smaller screens.

    I would have thought there would be some quick CSS along the lines “if the screen width is smaller than this make H1 50% or even 30px”. I have tried a few searches but not find anything along those lines.

    The page is now live, so I would love to get that fixed quickly.

    June 15, 2020 at 3:33 pm #1222676
    Victoria

    Hey Frank,

    You can define smaller font-sizes for the elements that you need using a media query like this one:

    
@media only screen and (max-width: 989px) {
  #top #wrap_all .all_colors h1 {
    font-size: 30px;
 }
   #top #wrap_all .all_colors h2 {
    font-size: 24px;
 }

}

    If you need further assistance please let us know.
    Best regards,
    Victoria

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