How to remove page scrolling to the left because of a photo? - html

Question

Currently, I am trying to fit (crop) image on the mobile version of the website, but, with no results...
How it looks on a desktop -
How it looks on a mobile -
Image crops on mobile because position: absolute; margin-left: 50%;, but..., this page has a scroll to the left, like this -
I've tried object-fit, different positions, so on, and no success.
How should it be done?

Answer 1

No image is going to be able to cope with all random viewport aspect ratios.
In this particular design it seems important that the figure is looking at/moving towards the text on the left, so the common method of dealing with narrow portrait viewports by putting one half of the 'header' below the other won't make sense in this case.
One suggestion therefore is to separate out the figure from the background and position and size it in relation to the aspect ratio/size of the viewport. Bearing in mind that the text on the left has to have a certain minimal physical size in order to be readable, this snippet sets a minimum absolute width and also the percentage across the viewport that the figure will stand.
Obviously you will want to alter the actual numbers here to get the layout that is required for narrow as well as wide devices so treat the numbers used here as being just for the demo.
Also, the colored background could be a real image as stretching to use cover would work given its design, but in this snippet it is roughly drawn using CSS just to give the idea. The figure has been roughly cut out of the given image in the question and of course would need to be a better done for a published environment.
* {
padding: 0;
margin: 0;
}
.bg {
--minw: 256px;
/* minimum width we allow the left hand side (with the text) to go */
--textw: max(var(--minw), 50vw);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: inline-block;
}
.bg::before,
.bg::after {
display: inline-block;
position: absolute;
top: 0;
left: 0;
content: '';
background-repeat: no-repeat no-repeat;
}
.bg::before {
width: 100vw;
height: 100vh;
background-image: radial-gradient(circle, rgba(160, 32, 240, .8), transparent), linear-gradient(to right, rgba(0, 0, 0, 0), #00B7EB), linear-gradient(to right, rgba(255, 0, 255, .6), rgba(160, 32, 240, .8));
background-position: center center;
}
.bg::after {
background-image: url(https://i.stack.imgur.com/655zI.png);
background-size: contain;
--pc: 80%;
background-position: var(--pc) center;
--w: calc(100vw - var(--textw));
width: var(--w);
left: calc(100vw - var(--w));
margin: 5% 0;
height: calc(100vh - 10%);
}
.text {
height: 200px;
width: var(--textw);
position: relative;
top: 0;
left: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.innertext {
border: solid white 2px;
color: white;
padding: 5%;
}
#media screen and (max-aspect-ratio: 1 /1) {
body::after {
--pc: 90%;
}
}
<div class="bg">
<div class="text">
<div class="innertext">HERE IS SOME TEXT</div>
</div>
</div>
Additional note: background-attachment: fixed is not fully implemented on all browsers at the moment so the backgrounds are added to pseudo elements on a div which is given position fixed.

Answer 2

Use two different versions based upon the screen size in picture element, or use object-fit in the css for mobile media query.
You are getting a horizontal scroll bar because of the absolute position plus the margin, this would push the image to the right of the screen(assuming 100% wide image). If you wanna keep it this way, use overflow-x: hidden on the html and body tags.