Jump to content


Photo
- - - - -

Responsive Text in header

media query text box

Best Answer jmad , 13 June 2014 - 01:37 AM

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;

        }

      }

    }

  }

}

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 MobileParity

MobileParity

    Member

  • Members

  • 27 posts
  • Framework Version:Latest DMS
  • Country: Country Flag

Posted 12 June 2014 - 07:57 PM

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



#2 jmad

jmad

    Advocate

  • Members

  • 777 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 13 June 2014 - 01:37 AM   Best Answer

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;

        }

      }

    }

  }

}


  • Danny likes this

#3 MobileParity

MobileParity

    Member

  • Members

  • 27 posts
  • Framework Version:Latest DMS
  • Country: Country Flag

Posted 13 June 2014 - 06:14 PM

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.



#4 MobileParity

MobileParity

    Member

  • Members

  • 27 posts
  • Framework Version:Latest DMS
  • Country: Country Flag

Posted 13 June 2014 - 06:16 PM

Not sure how to mark this as "solved".



#5 jmad

jmad

    Advocate

  • Members

  • 777 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 13 June 2014 - 08:58 PM

No problem.



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 June 2014 - 11:52 AM

Thanks for informing us the issue has been resolved.







Also tagged with one or more of these keywords: media query, text box