Margins and Padding on Mobile

Hi, I have the following question.
On my start page, I have different rows with content and I would like to have larger paddings on the desktop version and smaller on the mobile.

Also is there a way to scale the fonts? It does look a bit cut off on mobile

Thank you!

Hello There,

Thanks for writing in! I have check your site and I can see that you are using percentage for the paddings and margins especially the left and right paddings and margins. The drawback of using percentages is that it won’t have the same result for both screen size (desktop and mobile). I would recommend that you set margin: 0 {123}% and add an inline css max-width: {123px}; which will be the maximum width of the row container in desktop screens and the (%) percent margin will be applied for the smaller screen. The left and right padding may not be necessary if you have set the maximum width already.

PS: please do not forget to set the actual maximum width in pixels as I am only using 123px as reference in the code above.

Hope this make sense.

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