Archived

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

  • 0

Type Is Not Resizing Responsively


Question

Posted · Report post

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:

http://varsity.wpengine.com/what-we-do/

 

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

 

Thanks in advance!

Share this post


Link to post
Share on other sites

1 answer to this question

Posted · Report post

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.

.hentry h3  {
  font-size: x-large;
}
@media (max-width: 1000px) {
.hentry h3  { font-size: large; }
}
@media (max-width: 500px) {
.hentry h3  { font-size: medium; }
}

I've tested the above on my test site, if you want to see it in action visit - http://client1.surreydiscountwebsites.co.uk/image-page-2/

Share this post


Link to post
Share on other sites