Jump to content

Archived

This topic is now archived and is closed to further replies.

MobileParity

Responsive Text in header

Recommended Posts

MobileParity+    0
MobileParity

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
jmad+    80
jmad

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;

        }

      }

    }

  }

}

  • Like 1

Share this post


Link to post
Share on other sites
MobileParity+    0
MobileParity

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
MobileParity+    0
MobileParity

Not sure how to mark this as "solved".

Share this post


Link to post
Share on other sites
jmad+    80
jmad

No problem.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • NearlyJen
      By NearlyJen
      Hey everyone, I have a teacher trying to post some links in a text box and he's doing it right but the links still aren't working. His html is attached and links are below. This page: http://arts.eastsideprep.org/resources/ This is the link that is being produces from that html, which obviously results in a 404: http://arts.eastsideprep.org/resources/"http://www.seattlesings.org/" Help? Thank you! Happy Friday! Jennifer
    • balfred1345
      By balfred1345
      Hi,
      I'm attempting to create a new Media Query to allow a high rez image to show above 1400px. In other words, I'd like to have a fourth image size beyond that which I'll use with the .visible-desktop utility class that is part of Bootstrap.
       
      You can see my non-working attempt in the section with the orange placeholder images here: http://whub34.webhostinghub.com/~videoh6/cidev2.com/
       
      HTML and LESS is below.
       
      Thanks very much!
      -Bruce
       
      Here's what I've tried:
      HTML in a grid in a text-box referencing the class visible-desktopLarge:
      <div class="span9 zmt zmb"><span class="visible-desktopLarge"><img src="http://whub34.webhostinghub.com/~videoh6/cidev2.com/wp-content/uploads/2014/01/Placeholder870x365.jpg" alt="Placeholder870x365" width="870" height="365"/></span> LESS:
      @media (min-width: 1400px) { #site .visible-desktopLarge { display: visible; } }
    • NBI
      By NBI
      I have an issue with the shortcode for buttons. I've copy/pasted the button-shortcode from the documentation into a text box, but it isn't showing. What am I doing wrong?
       
      Thanks in advance!
       

    • studio12
      By studio12
      I created a Branding Area via the tutorial. Now every time I insert a new text box, the social media icons are also there. How do I get rid of the social media icons in new text boxes, but keep them in the text box in my branding area?  
      -thanks
    • treadwellimages
      By treadwellimages
      Hi everyone,
      This may be a silly/simple question, but is there a way to create hyperlinks/anchor text within DMS Text Boxes without knowing code? Kind of like a right click action on a MS Word document and insert URL.
       
      Thanks,
      Darrly
×