bootstrap, grid, flexbox

Salaam alaikum

Hello Abdulkareem

You are right, I struggled quite a bit myself at that part.

If you want an easier way to achieve a responsive result, You should use a transform: translate() ; css property to style the phones image, It Works like magic:

    .home-section-images{
        flex-basis: 50%;
        width: 100%;
        position: relative;
    }



        .home-section-images   .phones-img{
            width: 100%;
            position: relative;
            left: 100%;
            transform: translate(-83%,-15%);
            z-index: -1;
        }




       .home-section-images   .phones-bg{
            width: 400%;
            position: absolute;
            left: 100%;
            transform: translate(-25%,-25%);
            z-index: -10;
        }

Assuming that you used a flex display to align the home section texts and images

Hope i was of help to you, Tell me if you have any questions.

Happy Coding, And Best Regards

Ahmad