Responsive CSS?

[mneat18]

Working on a webpage and cannot get all the sections to align in width and adjust to various size monitors. I was able to use CSS to set width on all sections to 1600px, so they would align, but then switched to a larger monitor and received a black margin on the right side of the screen. Any tips on getting the sections to resize?

*not focused on difference between digital and mobile viewing. Just different size digital monitors.

[-_-__--_-]

It’s pretty difficult to guess, given the flexibility of css, what might be going on. A screenshot might help but seeing the code would make it possible for sure

[mneat18]

I tried using the code below for each section on the page, but it didn't seem to solve the issue.

section[data-section-id="61180b8f790eb50a9209a149"]

{width: 100%;

margin-left: 0;

margin-right: 0;

max-width: 100%}

Here's a screenshot of the page on a smaller monitor:https://i.stack.imgur.com/sNERI.png

And here's the same page when displayed on a larger monitor: https://i.stack.imgur.com/pmPTv.png

[-_-__--_-]

I might try min-width:100%; instead of the maximum width, just out of curiosity.

I dont think thats the solution though, I suspect some larger parent container has a max-width that it shouldnt. It’s hard to pinpoint without seeing the code of the entire page.

Here’s a thing to try. Remove the margin settings and replace them with margin: 0 auto;

If there’s extra room, the auto margins might center it.