Hello there, this is my very first question on this platform. I'm still in the early stages of learning all these concepts, so please be patient with me 🙂
Currently, I am working on creating a practice page using only HTML, Sass, and bootstrap-grid.css. Specifically, I'm focusing on utilizing rows and columns and have excluded card classes from the file as I styled them separately. However, I've come across a seemingly simple issue that's been keeping me up at night.
I am trying to ensure that all .card-text divs (the white background ones) visually match the width of the images above them. Simply resizing or absolutely positioning the .card-text divs doesn't seem like the right solution as it may lead to other issues. Additionally, I want to maintain the use of .col- for easier responsive web design outcomes. The .card-text and .card-img divs inherit the width of the .col-, while also ensuring that the images maintain their correct proportions. The problem seems to lie mainly within the .card-text div (at least visually).
The column structure within a .row is structured as follows:
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="images/r1i1.jpg" alt="image">
</div>
<div class="card-text">
<h6>Ebony & Ivory</h6>
<h5>Branding</h5>
</div>
</div>
</div>
The styling for this section in SCSS format is outlined below:
.portfolio {
background-color: $color-background;
.card {
background-color: $color-background;
padding: 20px;
.card-img {
height: 300px;
margin: 0 44px;
overflow: hidden;
img {
vertical-align: bottom;
height: 100%;
}
}
.card-text {
background-color: $color-body;
padding-top: 29px;
padding-bottom: 27px;
}
h5 {
margin: 2px 0 0 0;
font-weight: lighter;
font-family: $font-decor;
color: #737373;
font-size: 14px;
}
h6 {
font-family: $font-text;
font-weight: bold;
font-size: 18px;
margin: 0;
color: #333333;
}
}
.col {
padding-top: 45px;
}
}
Screenshots displaying the inspection of the divs can be viewed here:
EDIT:
After some trial and error, I was able to find SCSS styles that worked effectively. Here they are:
.portfolio {
background-color: $color-background;
.card {
background-color: $color-background;
margin: 0 44px 50px 44px;
.card-img {
overflow: hidden;
img {
vertical-align: bottom;
width: 100%;
}
}
.card-text {
background-color: $color-body;
padding-top: 29px;
padding-bottom: 27px;
h5 {
margin: 2px 0 0 0;
font-weight: lighter;
font-family: $font-decor;
color: #737373;
font-size: 14px;
}
h6 {
font-family: $font-text;
font-weight: bold;
font-size: 18px;
margin: 0;
color: #333333;
}
}
}
.col {
padding-top: 45px;
}
}
In conclusion, the root cause of the issue was setting a fixed height to .card-img, resulting in unforeseen challenges.