%age CSS of the actual CSS


The CSS is coming from the user generated values like this →

but for different screen versions(responsiveness) I used to change them to %age.

@media screen and (max-width: 1100px) {

h2 {
 font-size: 75%(of the actual font-size);

Is this possible?

Generally people use the relative units: em or rem to alter font sizes, where 1 is equal to 100%.

1 Like

user can enter primary h2 value(different fonts) in em, px or any format and then on lower screen versions that should be set in terms of %age.

So this is some kind of user interface where users can set the font size they want for desktop, and you want to automatically modify the values they enter for mobile / small screen. Have I understood that correctly?

1 Like

100% correct.


Any update to this question?

(TL;DR) Why would you want to add such code?

(???) To allow the user to optimize his experience on your site? The user can make any of these changes in his browser, if he wishes. Besides, in a well designed web page, the size of the font has been optimized by the coder to display at all screen widths. If you are trying to make up for a lack of knowledge of how to use breakpoints or scaling techniques, don’t; your ambition defeats the essence of responsiveness which is to adapt/adjust to all screen sizes and densitites without user intervention. Continue reading, practicing, experimenting and learning. Typography on the web isn’t a perfect world, yet; but it’s very good and gradually getting better. Read… learn about the obstacles and achievements. Sounds like you would enjoy it.

Here are a couple of current articles worth reading:
Viewport Based Typography

Options Panel are the parts of modern-day CMS so that a layman can make necessary changes. There are thousands of google fonts and various versions such as px, em etc and we do not know which google fonts and which dimension will be chosen by the client who is making customization through options panel in the admin. as such we have only one option left and that iss to handle the fonts sizes in media queries on the %age basis. even if we say fix some em value then one should be cautious that different fonts will have different dimensions based on the em value.

I must be way off base here. Are you designing a CMS or a web site?

1 Like

Wordpress Theme sir.

Ah, OK, you are designing a Wordpress Theme, presumably for sale or free distribution.

Then I AM way off base. Thank you. :smile: Sorry for this intrusion.

1 Like

Thanks, but it was not intrusion but an honest effort to help me. Trying to earn my living through Wordpress. Lets see How far will I go.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.