Set Font Size, Section Margin, Padding,... for different devices (Mobile, Desktop, Tablet)

Modified on Thu, 10 Mar 2022 at 05:27 PM

Sometimes you want to set a font size for Heading on Desktop different from Mobile or Tablet but you don't know how and where to insert the values. This writing is to show you how to insert the values to set the Font size, Section margin, section padding,.. for different devices just following the format below.



>>>The Heading font size format: 

  • If you insert only one value (eg: 45px), the heading will display with 45px regardless of the interfaces Mobile or Desktop
  • If you insert 3 or 4 values (eg: 45px, 50px, 55px, 60px), the values will be applied following the order: Mobile (45px), Tablet (50px), Desktop (55px for desktop with the small screen), Desktop (60px with bigger screen). Remember to add a comma after each value, it will separate the value and apply each to corresponding devices

* You can view this clip to know better how to adjust the font size for different devices 



>>> Set the Section margin or Section padding 

To set the section margin or section padding for different devices, it's quite the same as adjusting the font size for different devices above. But instead of inserting one value in the pixel unit for each device, set the margin or padding needs 4 values for one device. 

  • One value for one device including 4 positions around the margin: Top Right Bottom Left (Eg: 20px 30px 50px 30px respectively)
  • If you just want to set the same margin for all devices, then you only need to add 4 values following the format above in the order: Top Right Bottom Left 
  • If you want to set the different section margins for Desktop, Mobile, and Tablet, as always you need to add a comma between values. For example20px 30px 50px 30px10px 30px 50px 20px20px 40px 30px 40px - MobileTabletDesktop (After a comma, the margin will be set for another device)


>>>> With other settings such as: set Max number of item per row, Min height, Block widthManually height,... you can apply the same format with only one value for one device, but it depends on which unit required (it may be in pixel unit as usual, but it can be in %, or sometimes it's a number only). Remember to use a comma to separate each value (Eg: 1,1,5 - Mobile, Tablet, Desktop respectively)












Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article