The image shape at the bottom of the screen may disappear on certain resolutions

I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tried various solutions, but nothing seems to work.

https://i.sstatic.net/NWVHa.png

This is the HTML code:

<div class="col-lg-3 col-sm-6">
  <div class="card h-100">
    <div class="card-img">
      <img src="..." class="card-img-top img-fluid" alt="">
    </div>
    <div class="card-body">
      <h4 class="card-title">Heroine's Quest: ...</h4>
      <h5>Winner of 11 AGS Awards</h5>
      <p class="card-text">Heroine's Quest is an adventure / RPG hybrid. Like in many adventure
         games, you have a world to save, and must use your wit, guile and inven...</p>
    </div>
    <div class="card-footer">
      <a href="game-details.php" class="btn btn-ags">Learn more <span class="d-none d-sm-inline"> 
        <i class="fas fa-arrow-right"></i></span> </a>
      </div>
    </div>
  </div>
</div>

This is the CSS code:

.card {
    box-shadow: 0 0 30px rgba(68, 68, 68, 0.2);
    transition: .3s;
    background-color: #fff;
    margin-top: 10px;
}

@media (min-width: 481px) {
    .card:hover {
        transform: scale(1.05);
        transition: .3s;
    }
}

.card .card-img {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.card .card-img img {
    max-height: 199px;
    width: 100%;
}

.card .card-img:after {
    background: url(../img/home-game-highlights-shape.svg) no-repeat center bottom;
    background-size: contain;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 999;
}

.card .card-footer {
    background-color: #fff;
    border-top: none;
    text-align: center;
}

This is the link to the .svg file used:

Here is the code in JSFiddle: https://jsfiddle.net/f2Lengk6/

Answer №1

After hours of attempting to find a solution, I finally figured it out right after posting:

I made a change from:

.card .card-img img {
    max-height: 199px;
    width: 100%;
}

to:

.card .card-img img {
    height: 199px;
    width: 100%;
}

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

Utilizing Inline Placement within Email Templates

Seeking assistance in finding an alternative method to achieve the desired functionality in an email template. Having trouble with inline position styling being removed. table { width: 80%; border-spacing: 0; } table tr td.label-dots { positio ...

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

Displaying a video in fullscreen on a webpage

Struggling to achieve the desired result, seeking advice from experts. Looking to create a classic example like this: http://codepen.io/anon/pen/rWwaRE But want it embedded within blocks of text and possibly triggered by scrolling over it similar to this ...

Show XML data with namespaces - utilizing PHP

Can someone help me figure out how to display values from an API that returns XML? I've been searching, but most examples don't have namespaces or handle both. When I try with both, it always causes bugs and fails to display the values... Here i ...

Leveraging the Power of SASS Variables Across Your Entire NativeScript Application

Currently, I am in the process of developing an app using NativeScript 6.4.1 along with Angular 8. In order to enhance my styling capabilities, I have decided to incorporate SASS due to its advantageous features like variable names. My designer has suppli ...

Styling the ::selection inline with CSS allows for custom

I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

Alignment of slider arrows in a CSS carousel with Bootstrap 4.1.1

Is there a way to position the carousel control arrows at the left and right ends of the screen in Bootstrap 4.1.1? I attempted the code below but it didn't yield the desired result. .carousel-control .icon-prev{ left: 5px } .carousel-control .icon ...

Expanding CSS transition for child elements as they increase in size

I am currently working with Vuetify and have encountered an issue with a v-list-item that contains a title and a subtitle. The problem is that the title is restricted to displaying only one line. If the title exceeds this limit, it gets cut off and shows " ...

Displaying the URL of a link on the screen using jQuery

I am looking for a solution to add a link address after the link itself in a table containing reference links for our staff. I have used CSS to achieve this in the past, but the address was not copyable by users. Instead, I am interested in using jQuery&ap ...

Attempting to insert a hyperlink into a carousel widget

PROBLEM SOLVED I've discovered that I forgot to close a tag at the end. Silly mistake... I'm a student seeking help as I continue to learn. Any assistance would be greatly appreciated. I'm using Bootstrap 5, trying to add a carousel with ca ...

Enhance VideoJS using custom Ionic icons in a NextJS environment

I'm creating a platform for video content and I want to enhance the VideoJS player by incorporating icons from the Ionic set. However, as I typically use the <ion-icon/> tag to insert icons on my pages, I had to individually specify each icon&ap ...

Error encountered when compiling SCSS with the '@use' statement

Currently, I am utilizing Gulp for the purpose of compiling scss into css. However, whenever I include a @use statement in my code, it does not compile the css correctly into the css file; instead, it simply duplicates the @use statement. What could be cau ...

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

Modify the styling of the main webpage using the iframe

Can the CSS of a parent page be modified from an iframe when the parent page and iframe are hosted on separate domains? ...

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. https://i.sstatic.n ...

Is there a method to view text options that are too long within a fixed width <select multiple> HTML box?

Here is the code I am working with: <div id='div2' style='height: 430px; width: 350px; overflow:auto;'> <select multiple id="id" size="28" style="FONT-SIZE: 12px; FONT-FAMILY: Arial; width: 100%"> It's a challenge bec ...

Adding a border in jQuery or Javascript to highlight empty form fields

After making the decision to dive into the world of Javascript, I've been dedicated to perfecting a script that will encase empty elements with a border right before the user submits a form. My ultimate goal is to implement live validation in the form ...

Gallery of Disappearing Images

I am encountering issues with the image gallery on my website, as it seems to create a space to the right when viewed on screens smaller than 350px. This results in a gap on the entire right side of the page. My goal is to make this image gallery responsiv ...