Picture at home page does not fit

[liekecomp2022]

The big picture at the home page of the website https://ontwikkel12.comp-it-aut.nl/ does not fit at tablet, mobile etc.
It should look the same like at the website https://www.inzichtencoaching.nl/.
Can someone help me with the correct adjustments or give me the css code?

[Webdongle]

Fits on my Samsung A53 5g

[AMurray]

Just by testing (resizing browser window on a desktop PC), I can see the first one doesn't resize like the second example.

Do you need to make the picture dimensions "%" not "px"? With % it should adjust to the device/screen size, or you need to use @media directives for defining the dimensions for approximate sizes of different devices.

References: https://www.w3schools.com/cssref/atrule_media.php and https://www.w3schools.com/css/css3_mediaqueries.asp

[ceford]

Look at the page source in your browser Developer Tools. It contains strange looking style statements suggesting the problem lies with your template.

[Mr. Wimpy]

Short answer

To get the face to show similar as the demo, on small and big screens, change

Code: Select all

.sp-page-builder .page-content #section-id-1736860062416 {
  (...)
  background-position: 0 0;
}

to

Code: Select all

.sp-page-builder .page-content #section-id-1736860062416 {
  (...)
  background-position: center;
}

Long answer

Your html and css is too complicated for something this simple.
That makes it difficult for us to help you or for yourself to fix and maintain.

I don't know SP Page Builder, so the output may be created by SPPB or because you designed it this way in SPPB.
But see if you can clean it up first.

Clean code == easy to maintain / trouble shoot

I believe what you want, can be achieved with html that is 3-4 levels deep.
(Yours is 10: <div> inside <div> inside <div> inside <div>, etc.)

If SPPB allows it, add your own classes and use those in your css.
The id-numbers added by SPPB makes it difficult to read your code.