I'm working on coding 3 different boxes. Each box consists of an image and a title in the first column, followed by a paragraph, and a link at the bottom. The boxes themselves are not editable, only the content inside them can be changed. The challenge is to make all the boxes look uniform regardless of the length of the title. Currently, the length of the title affects the size of the pictures.
When the title spans more than one line, the image shrinks. To address this issue, I have added a min-width property to my code. This has solved the problem for the boxes that were previously problematic, but now the third box is wider than the other two. Here is the updated CSS code for the images:
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
What changes can I make to ensure that all 3 images appear the same size?
Box Structure:
<div class="box box--product">
<div class="box__content">
<div class="box__title d-flex">
<div class="box__icon" style="background-image: url(\''.($atts['icon'] ? wp_get_attachment_image_src($atts['icon'], 'full')[0] : '').'\');"></div>
<div class="box__icon box__icon--hover" style="background-image: url(\''.($atts['icon_hover'] ? wp_get_attachment_image_src($atts['icon_hover'], 'full')[0] : '').'\');"></div>
<h3 class="box__hdl">'.$atts['nadpis'].'</h3>
</div>
<div class="box__excerpt match-height">
<p>'.$content.'</p>
</div>
<div class="box__more">
<hr>
<a href="'.$atts['url'].'" class="link-more">Learn More</a>
</div>
</div>
</div>
Sass Styling:
.box {
$this: &;
background: $gray-lighter;
border-bottom: 7px solid $primary-green;
color: $black;
cursor: pointer;
//margin-bottom: $grid-gutter-width;
&--not-hover {
cursor: default;
}
&__title {
align-items: center;
&--subprod {
margin-bottom: 16px;
//min-height: 75px;
}
}
&__more {
text-align: center;
}
&__icon {
background: {
position: center;
repeat: no-repeat;
size: auto 44px;
}
border: 1px solid $gray-dark;
border-radius: 5px;
height: 80px;
margin-bottom: 16px;
margin-right: 10px;
width: 80px;
&--big {
background-size: 65px auto;
border-width: 2px;
height: 112px;
margin-bottom: 40px;
margin-top: 20px;
width: 112px;
}
&--hover {
border-color: $white;
display: none;
}
}
&__excerpt {
font-size: 14px;
letter-spacing: .44px;
line-height: 21px;
margin-top: 10px;
}
&--product {
border-bottom-width: 7px;
#{$this}__hdl {
color: $primary-green;
font-size: 16px;
line-height: 20px;
margin-left: 10px;
text-transform: uppercase;
}
#{$this}__content {
padding: 15px 22px 5px;
}
#{$this}__icon {
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
&--hover {
border-color: $white;
}
}
#{$this}__excerpt {
// border-bottom: 1px solid $primary-green;
color: $gray-dark;
margin-bottom: 15px;
}
#{$this}__more {
.link-warning,
.link-more {
letter-spacing: .4px;
margin-bottom: 10px;
}
}
&:hover,
&:focus {
#{$this}__hdl {
color: $white;
}
#{$this}__excerpt {
border-bottom-color: $white;
}
#{$this}__more {
.link-warning {
&::before {
background-image: url('../images/icon-warning--white.svg');
}
}
}
}
}