Responsive text scaling

comAnimado · August 2016

I´m having a problem with some text, actually an excerpt for a portfolio image that appears on hover, not scaling and being clipped-cropped out of view. How can I set a different variable to make sure the text is scaling properly fo rthis screen size.

Any help would be appreciated. Here´s the temporary IP http://104.236.156.59/ to review the site.

-- Brett

Albert · August 2016

Hi,

to decrease font size on mobile, you need to activate Decrease Fonts option under Theme options > Responsive section.

comAnimado · August 2016

I did set this option ... but there's a range in screen size between 768 and 960 where around 840 (pixels wide) where the fonts are too large to fit inside of the portfolio containers. Below 768 the font is reduced and is no longer a problem.

Can you take a second look ... you can reproduce the problem I'm experiencing if you use Google's "resizer" (http://design.google.com/resizer/#).

Can I modify the responsive.css to make this adjustment?

I appreciate your help.

-- Brett

Albert · August 2016

So if it's still too large, then you need to use an additional css to decrease such fonts.

.portfolio-item .desc-inner .desc-wrapper { font-size: 16px !important; }

comAnimado · August 2016

Ok ... I can do that, but it'll no longer be dynamic, right? My problem is when the "responsive" functionality of your site chooses WHEN to reduce the type. If I apply this css ... it'll be a global change to the type at ALL responsive screen sizes.

Thanks guys.

-- Brett

Albert · August 2016

Yes, it would be global. But if you want to apply this css for specific screen sizes, you need to wrap this code into right @media tag. All details about media you can find on http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

comAnimado · August 2016

I managed to fix this on my own, but I definitely appreciated your help.

It's risky for inexperienced customers, but you could have pointed me to the responsive.css stylesheet in the theme/css folder ... this is exactly how I fixed it ... by customizing the font-size and line-height for each screen size wrapped in the @media tags.

However, I could have written custom css in the "betheme options custom css" to accomplish this as well ... but for me it was easier to see ALL of the code related to this in the responsive.css stylesheet.

Thanks again guys ... hopefully this will help other people searching for similar solutions here in the forum.

-- Brett

Albert · August 2016

Ok, we will be forwarding to responsive.css file next time. We thought the article about @media would be enough to understand how it works.

Responsive text scaling

Comments