Dynamic left and right margins?

Question

I want my website to work well for both desktop and mobile view. When viewed on desktop, I want it to have a pretty big margins on the left and right side. (Image below) . However, when I shrink to to mobile view. They need to reduce to around 10px. How can I do this?

Currently I only have a

.body {
margin-left: 200px;
margin-right: 200px;

But this doesn't work well for mobile view...

enter image description here

Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — dale landry, May 02 '21 at 04:59

score 0 · Accepted Answer · answered May 02 '21 at 05:03

0

Adding a fixed number as a margin will only work for your current resolution. Try changing the desktop resolution and you will see what I'm talking about.

Instead of using 200px, use auto, as that value will fill up the remainder of the space.

.body {
margin-left: auto;
margin-right: auto;

That's one of the ways you can use to center an HTML element.

answered May 02 '21 at 05:03

Rickard Elimää

7,107
3
14
30

are there any constraints we can add on top of it? Say 10px of margin with auto? (currently it's at 0px) – kingofeverything May 02 '21 at 17:30
I would add 10px padding to the `body` element. (Honestly, I always use `rem` as spacing, never pixels, rarely percentage.) – Rickard Elimää May 02 '21 at 21:54

Dynamic left and right margins?

1 Answers1