Scale Div with screen size including children, text and images

Question

I have a design that includes multiple DIVs contained in a container div. Each DIV is positioned to the pixel in order to faithfully render the design. These DIVs contain a mix of text and images. I would need the entire thing to resize with screen size changes and more generally be responsive. I am more interested in a scaling solution than a break point based solution. I tried multiple things: viewport calculations, SCSS mixin, I tried to implement this solution ... but based on my lack of success, I think I am not using them correctly. My Code looks like this: - CSS

.spacer30 {
  margin-top:30px;
}
.cardFieldColor {
    position: absolute;
    height: 220px;
    width: 316px;
    top: 0px;
    left:0px;
    border-radius: 15px 0px 0px 0px;
    z-index= 1;
}

.fieldIconImg {
  width: 71px;
  height: 66px;
}

.fieldPictureImg {
  width: 284px;
  height: 195px;
}

.fieldIcon {
    position: absolute;
    top: 0px;
    left: 33px;
    z-index = 10;
}

.fieldPicture {
    position: absolute;
    height: 195px;
    width: 284px;
    top: 25px;
    left: 316px;
    border-radius: 0px 15px 0px 0px;
    z-index = 5;
}

.totalRaised {
    position: absolute;
    height: 134px;
    width: 600px;
    top: 220px;
    left: 0px;
    background-color: #383838;
    z-index = 5;
}

.stats-1 {
    position: absolute;
    height: 208px;
    width: 600px;
    top: 354px;
    left: 0px;
    background-color: #dcddde;
    z-index = 5;
}

.stats-2 {
    position: absolute;
    height: 71px;
    width: 600px;
    top: 562px;
    left: 0px;
    background-color: #ebebeb;
    border-radius: 0px 0px 15px 15px;
    z-index = 5;
}

.fieldName {
    position: absolute;
    height: 22px;
    width: 290px;
    top: 75px;
    left: 33px;
    color: #ffffff;
    font-family: 'AkzidenzGroteskBE';
    font-size: 2vw;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
    text-transform: uppercase;
}

.projectName {
    position: absolute;
    height: 71px;
    width: 290px;
    top: 114px;
    left: 33px;
    color: #1b1b1b;
    font-family: 'AkzidenzGroteskBE';
    font-size: 3vw;
    font-weight: 700;
    line-height: 26.346px;
    text-align: left;
    text-transform: uppercase;
}

and HTML:

<div class="row">
    <div class="col-sm-12">
        <div class="cardContainer">
            <div class="cardFieldColor" style="background-color: blue">
                <div class="fieldName">
                    Technology
                </div>
                <div class="projectName">
                    Create scaling Divs and content
                </div>
            </div>

            <div class="fieldIcon">
                <img class="fieldIconImg" src="https://cdn1.iconfinder.com/data/icons/xcase-icons/48/icon_ui-23-512.png">
            </div>
            <div class="fieldPicture">
                <img class="fieldPictureImg" src="https://www.arhamsoft.com/wp-content/uploads/2017/03/blog-13.jpg">
            </div>

            <div class="stats-1">
              Stats #1
            </div>
            <div class="stats-2">
              Stats #2
            </div>
        </div>
    </div>
</div>
<div class="spacer30"></div>
    <div class="row">
    <div class="col-sm-12">
        <div class="cardContainer">
            <div class="cardFieldColor" style="background-color: red">
                <div class="fieldName">
                    Technology
                </div>
                <div class="projectName">
                    Create scaling Divs and content
                </div>
            </div>
            <div class="fieldIcon">
                <img class="fieldIconImg" src="https://cdn1.iconfinder.com/data/icons/xcase-icons/48/icon_ui-23-512.png">
            </div>
            <div class="fieldPicture">
                <img class="fieldPictureImg" src="https://www.arhamsoft.com/wp-content/uploads/2017/03/blog-13.jpg">
            </div>

            <div class="stats-1">
               Stats #1
            </div>
            <div class="stats-2">
              Stats #2
            </div>
        </div>
    </div>
</div>
<div class="spacer30"></div>

Here is a Fiddle with a base of the design. This design can repeat itself multiple times on the page.

I also realize that I probably should not use fixed dimensions for the images or even the inner DIVs but I am not sure how to do that and maintain the integrity of the design. I started fiddling with max-width and max-height but to no avail

Answer 1

Ended up solving this out with a break point based solution:

• Made the container a vw * vh size that works on laptop/desktop with a max-width and max-height to prevent unnecessary large rendering
• Then all the inside DIVs positioned using %age values to their right location
• Using @media, created a few sizes where I reset the container width and height to something that will respect the original width to height ration.