font-size: min & max settings?

Permalink Browser Info Environment
Is there a way to set the default paragraph (p tag) min and max font size?

I am testing on multiple screen sizes on devices ranging from 1920x1080 down to 4-inch phones.

The default paragraph font size scales too large on large screens, and scales much too small to read on small screens.

I have explored adding CSS 'font-size: min and max' settings to Theme->Customize, but I can't seem to override the default font-size min and max settings.

Any suggestions?

Thanks!

Mark

Type: Discussion
Status: In Progress
SnowyMountainWeb
View Replies:
jordif replied on at Permalink Reply
jordif
Hi Mark!

I'd suggest you to use media queries to target different screen sizes.

Try adding the following code. Each block of code targets a specific screen size range. So if you change the font size value in the last block, this will only work on screens below 480px. For instance, you could change it to "3.2rem" (so it would still scale, but not too small) or you could simply remove "font-size:2.8rem;" and use a fixed px value (for instance, "font-size:14px;").

/* Default */
.slides-container p, .slides-container p a, .slides-container p strong {
   font-size:28px;
   font-size:2.8rem;
}
/* Large desktop */
@media (min-width: 1200px) {
   .slides-container p, .slides-container p a, .slides-container p strong {
      font-size:28px;
      font-size:2.8rem;
   }
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
   .slides-container p, .slides-container p a, .slides-container p strong {


Regards,

Jordi
SnowyMountainWeb replied on at Permalink Reply
SnowyMountainWeb
Works perfectly!

I am really enjoying learning and using Concrete5. Your theme and your incredible support are greatly appreciated!

Thanks!

Mark
Meje replied on at Permalink Reply
Meje
Loving this theme! I have this exact issue. Ive added the above code to the customise addition css field in the theme, but the text is still very large on a desk top browser and much too tiny on a mobile....

I made the text paragraph.... other than that have I missed something?
jordif replied on at Permalink Reply
jordif
Hi,

thanks, glad you like the theme!

First, please note that if you want the text to be the same size on all devices, you don't need to use this code. Simply remove the custom CSS you've added and then disbable responsive typography by going to Page Properties -> Custom Attribute -> Disable Responsive Typography.

If you want typgrography to be responsive but want to adjust the size on each device, this code is simply a starting point. First, you need to add the code and then you need to change the font size value for each screen resolution. So if you want to increase the font size for small devices, change the "font-size" value in the last block of code (/* Landscape phones and down */). For instance, try changing it from "font-size:2.8rem" to "font-size:4.8rem".

You see, if you paste the code as is, you won't see any change. You need to adjust the font-size values to your needs.

Also make sure to click on the "Save" blue button after you add your CSS code (in the Customize Theme section) and clear you cache if you can't see your changes.

If this does not work, please send me a link to your site or paste the code you're adding here so I can have a look.

Hope this helps!

Jordi
Meje replied on at Permalink Reply
Meje
Hi Jordi,

Thanks for the awesome support! (if only all themes had this friendly timely support :) ) Changing the values in the code works perfectly!

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.