How can I center main content and use full screen on mobile layout?

Hi there… can someone tell me how to center and have the main content pages use the full screen? I was able to do it for the header (it’s doing what I want it to do), but I can’t figure it out for rest of it… Many thanks in advance!

@porch73 ,

Did you do this?

ThePrimeWeb_0-1706887365625.png

If you set the width to 1200px, that’s wrong. You shouldn’t do that.

The iPhone 14 Pro Max is set at maximum width of 430px. By setting it at 1200px, you are breaking your own site!

Well, it looks and works just fine on desktop. What code do I need to keep the current look on desktop, while achieving the look I want on mobile?

@porch73 , Of course it works fine on desktop! Desktop has more than 1200px width available space. We are talking about width, you can physically see that the desktop’s width is much longer than a mobile. You should remove the fixed width code. The phone should be allowed to adapt on it’s available width.

Yes, I get that. I just need correct code so that it displays correctly on mobile. However, I finally found what I was looking for. This fixed it:

.header-wrapper {

max-width: var(–page-width);

margin: auto; }