CSS Resizing Images, keeping formation

Question

I have a formation of images, as seen here:

The following is the HTML. "second-panel" is the main wrapper, which has the background image of the building. Each "diamond"-shaped image is positioned absolutely, using CSS, with pixel values.

 <!-- Second panel -->
    <div id="second-panel" class="parallax-wrapper">
        <div id="second-panel-diamonds">
            <img class="second-panel-diamond" src="images/furniture-min.png" alt="Furniture" />
            <img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" />
            <img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" />
            <img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" />
        </div>
        <div class="parallax-panel">
            ...(not relevant)...
        </div>
    </div>

CSS:

#second-panel-diamonds{
    position: absolute;
    left: 1%;
    top: -5px;
}
#second-panel .second-panel-diamond{
    position: absolute;
    /* width: 22%; */
    width: auto;
    height: auto;
    max-width: 350px;
}
.second-panel-diamond:first-child{
    top: 250px;
    left: 90px;
}
.second-panel-diamond:nth-child(2){
    top: 80px;
    left: 260px;
}
.second-panel-diamond:last-child{
    left: 337px;
    top: 337px;
}

The problem is when it comes to smaller screen sizes, as the images will obviously start to overflow, since they are given a fixed width and height. I tried setting them to a percentage width and height auto, but then of course they break formation as they get smaller. I tried setting their positions using percentage values as well, but it does not scale properly, according to the resizing of the images AND the resizing of the window.

Is there any way to maintain this formation while scaling the images down, or will I have to just redesign it for smaller screens?

Answer 1

Yes, using CSS @media queries. You just need to decrease the size of the images display (you'd have to not use auto, if needed, calc(auto - px)) for specific screen sizes (don't forget to change each image position later):

@media screen and (max-width: 600px) {
    #second-panel .second-panel-diamond {
        position: absolute;
        width: 50px;
        height: auto;
    }
}

@media screen and (min-width: 601px) {
    #second-panel .second-panel-diamond {
        position: absolute;
        width: 100px;
        height: auto;
    }
}