• 0
Sign in to follow this  
Followers 0

Responsive Text in header


Question

Posted · Report post

I have added 2 separate text boxes to my header to display the business name of my site. When the site is viewed on a mobile device the header text does not resize to fit the device. I have tried to use media queries albeit incorrectly. I have messed with padding & text size as well. However nothing seems to work. I know this can be done an it is fairly simple so forgive my lack of knowledge. The site is password protected and I can provide the information if needed. You can view the image here: http://screencast.com/t/y35EkMc1hcl

 

Cheers,

 

AG

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

There is a couple ways to accomplish this.  You could target the #id of the section or could create a custom class and add that to the components "custom styling classes" or you could change how all H2 or whatever level header appear.  

 

To create your own class use this code below (adjust font height and line height) and substitute h2 for whatever level your header is.  Then add "name-your-class" to the "custom styling classes" for the component.

 

.name-your-class h2{

  font-size: 53px;

  line-height: 85px;

  &{@media (max-width: 767px){

      font-size: 35px;

      line-height: 56px; 

      &{@media (max-width: 480px){

          font-size: 23px;

          line-height: 37px;

        }

      }

    }

  }

}

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That worked great! I am still getting a hang on media queries. My syntax was all messed up so this helps a lot. Thank you very much.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not sure how to mark this as "solved".

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0