How to fix this background:linear-gradient issue?

Hello guys,

Maybe someone can help me. I'm using the following CSS for my site background:

body {
background:linear-gradient(to bottom right, rgba(0,0,0,1) 0%, rgba(58,1,40,1) 100%);
}

Code (markup):

It works great, but I notice that have a little issue with my iPhone 13 Pro Max when I visit the site horizontally, it shows a blank space on the left and right side. Screenshot: https://prnt.sc/yXZC5dF7m-EI

This doesn't happen when I use a background image, for example:

body {
background: #0e0301 url("https://domain.com/image.jpg") fixed center top;
}

Code (markup):

But I don't want to use the image, I want to use the linear-gradient. Any idea how to fix this?

This is the site URL if you want to test it: https://bestlistofporn.com
Note: NSFW Content

Thank you in advance

 

Can someone help me with this, please?

 

It looks like the issue is that the linear gradient background is not covering the entire viewport when the device is rotated to landscape. One way to fix this is to set the background-size property to "cover" for the body element.

body {
background: linear-gradient(to bottom right, rgba(0,0,0,1) 0%, rgba(58,1,40,1) 100%);
background-size: cover;
}

Code (markup):

This tells the browser to scale the background image to be as large as possible so that the background area is completely covered by the background image. The image will retain its aspect ratio, and some parts of the background may be hidden to fill the screen.

 

Thank you for trying to help me.
Unfortunately, didn't work, please take a look: https://prnt.sc/0wTN6mDlJiZu

Any idea how to solve it?