Jump to content


Photo
- - - - -

Type Is Not Resizing Responsively

responsive type grid

  • Please log in to reply
1 reply to this topic

#1 adesouza

adesouza

    Advanced Member

  • Members
  • 51 posts
  • LocationSan Francisco
  • Country: Country Flag

Posted 24 April 2013 - 11:36 PM

I have a section of a site that is set up to have a 6 column grid using the span2 class.

When I resize the browser window, the span2's respond and resize, but the h2's within them stay the same font size, which eventually forces them to overlap.

Why isn't the font resizing with the columns/ How can I make the text resize?

 

The h2 styling is currently being applied via a .less file with the following code:

 

h2: @baseFontSize * 1.9;

@baseFontSize: 20px;

 

 

You can check it out at:

Please Login or Register to see this Hidden Content

 

It's the numbered section at the top of the page.

 

Thanks in advance!



#2 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 April 2013 - 01:24 AM

Hi Ade, since we spoke in live I've set up a replicate of your set up on my test site. I know you said you were using one of the Pagelines premium plugins - LESS Developer so I'm not sure if that add's any additional functionality and that's what you're trying to get to work or not.

 

In the Standard Framework, the font size isn't responsive for the paragraph text or headings in general. Resizing the browser window will resize the text container and wrap the text inside, but the text size doesn't actually scale down. Which is why the header text is then overlapping when you reduce the screensize, as they are all single words they can't wrap down onto another line. 

 

Two ways round this, first would be to resize the header text so its was smaller and the overlapping wouldn't occur. Or use some css with @media enquiries to scale the text down depending on the size of the browser window, like the example below.

Please Login or Register to see this Hidden Content

I've tested the above on my test site, if you want to see it in action visit -

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: responsive, type, grid