I always love playing around with CSS to create unique effects with my images, constantly changing their size through shrinking

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');
                    }
                }
            }
        }
    }

Answer №1

Is this the kind of thing you're looking for?

.card {
  width: 200px;
  height: 300px; 
  display: inline-block;
  margin: 12px;
  border: 1px solid black;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}

.card .title {
  flex: 0 0 32px;
  width: 100%;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card .link {
  color: blue;
  text-decoration: underline;
  flex: 0 0 32px;
  width: 100%;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card .image {
  flex: 1 1 auto;
  overflow: hidden;
}

.card .image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<div class="card">
  <div class="title">Some title</div>
  <div class="image">
    <img src="https://picsum.photos/200/300">
  </div>
  <div class="link">Some link</div>
</div>

<div class="card">
  <div class="title">Some title that is way too long to fit in 200px</div>
  <div class="image">
    <img src="https://picsum.photos/1024/768">
  </div>
  <div class="link">Some link that is also way too long for this little box</div>
</div>

Answer №2

While it may not be considered the most optimal practice, I simply included max-width: 57px; (+1px)

and the result was satisfactory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure an SVG maintains a fluid width while keeping its height constant?

My goal is to achieve the following: The SVG should dynamically scale its width to occupy 100% of the container's width. The SVG should either stretch or compress when the container's width changes, specifically affecting the wave drawn wit ...

Setting background colors for classes based on an array

I have a total of six div elements on a single page, all sharing the same class. My goal is to give each one a unique color from an array I have prepared. I want to avoid any repetition of colors among these divs. Currently, I have managed to assign backg ...

Attempting to contain the dimensions of the image within the confines of the card results in failure

Currently, I am designing custom cards featuring an image in the form of a water droplet... However, I am encountering difficulties in maintaining the proper drop shape across varying screen resolutions. Any guidance on this issue would be greatly valued. ...

Nested Bootstrap structure with a column containing two sub-columns

I am attempting to create a grid layout using bootstrap. The layout should consist of a full 12 column layout on desktop, with an 8 column grid and a 4 column grid within it. The 8 column grid will contain an image/text, while the 4 column grid will have t ...

Is it necessary to have uniform spacing between links in a responsive navigation menu?

I am attempting to create a horizontal menu navigation system. I have multiple links in the navigation, and my goal is to evenly space them horizontally. Is there a way to achieve uniform spacing between links in a horizontal menu? HTML: <div id= ...

Unusual sidebar scrolling issues experienced in Firefox

Currently, I am in the process of developing an app with a scrolling sidebar. However, there seems to be some unexpected behavior when using Firefox: the content within the sidebar disappears partially below the top of the div if the mouse is positioned lo ...

Adjust the source of the HTML5 video tag based on the orientation of an iPad

I am currently coding an HTML5 page specifically for iPad Mobile Safari, which includes a video tag for embedding video files. I have successfully implemented CSS3 media queries to determine the orientation of the iPad. My next challenge is to dynamically ...

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

bulk purchase discount with HTML/JavaScript/PHP

I am looking to add a slider feature to my "Prices" page in order to provide customers with an instant quote based on the quantity they select. The slider should range from 1 to 500 or even up to 1000, but having an input box for customers to enter the qu ...

Can a React single-page site be exported to HTML format?

I am currently working on a one-page web application using React and materialize-css. My goal is to export it as static HTML and CSS, allowing for easy editing of the HTML for prototyping purposes. Is there a way to export at least a snapshot of the curren ...

Tips for concealing overflow x on a responsive website

Could use some help here. Whenever I switch to responsive mode, the overflow x feature gets enabled and I'm at a loss on how to disable it. I've attempted using @media to disable overflow but unfortunately it's not working as expected. ...

Disable the default form input reset button generated by Internet Explorer 10

Just have one field form for search input. Below is the HTML code: <form class = "search-form hide-on-mobile"> <input class = "global" type = "text" placeholder = "Who are you looking for ?"> <but ...

Simple method to toggle between elements using jQuery

After creating a script using jQuery to show/hide content when tabs are clicked (which also changes the color of the clicked tab), everything is functioning smoothly. However, I believe there may be a more efficient way to switch between content that allow ...

Tips for preventing breaks in typography

I have implemented a material ui Typography component, but it's causing a line break even though there is enough space. Here is the code snippet: <Box flexDirection="row"> <Typography> Gender: <RadioGroup row ...

Concealing the path of a file input in CSS

Similar Question: How to Conceal Input File Path in HTML File Upload Hello there! I was wondering if it's feasible to conceal the input file path and only display the browse button? Thanks a lot! Lucas ...

Want to ensure a span is perfectly centered both vertically and horizontally within a div using minimal CSS code?

I am currently working with LESS (CSS) and facing an issue with aligning a span element (which contains button text) inside a div container (button). The span is horizontally centered but vertically aligned to the top. I also want the span to automatically ...

Adjust the clarity of the elements within my HTML document

I have been working on creating a login page that will appear in front of the main webpage. Through my online research, I discovered a technique to blur the main webpage background until the user logs in. Below is the code snippet: HTML: <div id="logi ...

To horizontally center a fixed element in HTML and set its width to match the parent's,

Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...

Is there a way to alter the color of the weekday header in the Date picker calendar?

I'm working on enhancing the accessibility of my website by changing the default blue color of the weekdays header (highlighted area in the screenshot). I've attempted to modify the CSS code below, but no matter which color code I use, I can&apos ...

Adjusting the width of a <div> element based on window size changes

So I have this Vuejs application that has three divs using CSS grid: a sidebar, a config panel, and a preview. I want to dynamically set the width of the preview div in pixels based on the current screen size and when the screen is resized. To give a bett ...