Responsive text scaling

Comments

• Albert

  August 2016

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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next