Why do my cards keep shrinking instead of moving to a new column when using flexbox and flex-flow?

I'm facing an issue with my flexbox that is causing my items to constantly shrink instead of moving to a new row. I've tried various solutions but nothing seems to work. I have removed the CSS for elements like headers that I believe are unrelated to the problem.

.store-row {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  flex-direction: row;
  flex-flow: wrap;
}

.card {
  position: relative;
  width: 320px;
  height: 480px;
  /* background: #191919; */
  border-radius: 20px;
  overflow: hidden;
  margin: 3%;
  flex-basis: 20%;
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  transform: skewY(345deg);
  transition: 0.5s;
}

.card:hover::before {
  top: -70%;
  transform: skewY(390deg);
}
<div class="store-row">
  <div class="card" id="netflix">
    <div class="imgBox">
      <img src="images/netflixlogo.png" class="mouse">
    </div>
    <div class="contentBox">
      <h3>NETFLIX PREMIUM 12 MESECI</h3>
      <h2 class="price">20.<small>00</small> €</h2>
      <a href="#" class="buy">Buy Now</a>
    </div>
  </div>
  <div class="card" id="spotify">
    <div class="imgBox">
      <img src="images/spotify.png" class="mouse">
    </div>
    <div class="contentBox">
      <h3>SPOTIFY PREMIUM 12 MESECI</h3>
      <h2 class="price">15.<small>00</small> €</h2>
      <a href="#" class="buy">Buy Now</a>
    </div>
  </div>
  <div class="card" id="nordvpn">
    <div class="imgBox">
      <img src="images/nordvpn.jpg" class="mouse">
    </div>
    <div class="contentBox">
      <h3>NORDVPN PREMIUM 12 MESECI</h3>
      <h2 class="price">10.<small>00</small> €</h2>
      <a href="#" class="buy">Buy Now</a>
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

It is advisable to eliminate the flex-basis: 20%; property from the styling of .card, as it conflicts with the specified width for these elements.

.store-row {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  flex-direction: row;
  flex-flow: wrap;
}

.card {
  position: relative;
  width: 320px;
  height: 480px;
  background: #191919;
  border-radius: 20px;
  overflow: hidden;
  margin: 3%;
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  transform: skewY(345deg);
  transition: 0.5s;
}

.card:hover::before {
  top: -70%;
  transform: skewY(390deg);
}
<div class="store-row">
  <div class="card" id="netflix">
    <div class="imgBox">
      <img src="images/netflixlogo.png" class="mouse">
    </div>
    <div class="contentBox">
      <h3>NETFLIX PREMIUM 12 MESECI</h3>
      <h2 class="price">20.<small>00</small> €</h2>
      <a href="#" class="buy">Buy Now</a>
    </div>
  </div>
  <div class="card" id="spotify">
    <div class="imgBox">
      <img src="images/spotify.png" class="mouse">
    </div>
    <div class="contentBox">
      <h3>SPOTIFY PREMIUM 12 MESECI</h3>
      <h2 class="price">15.<small>00</small> €</h2>
      <a href="#" class="buy">Buy Now</a>
    </div>
  </div>
  <div class="card" id="nordvpn">
    <div class="imgBox">
      <img src="images/nordvpn.jpg" class="mouse">
    </div>
    <div class="contentBox">
      <h3>NORDVPN PREMIUM 12 MESECI</h3>
      <h2 class="price">10.<small>00</small> €</h2>
      <a href="#" class="buy">Buy Now</a>
    </div>
  </div>
</div>

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 methods can I use to minimize the frequency of the blue box appearing around text?

I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox. However, I notice that every time I intera ...

javascripthtmlcss

Dealing with jQuery's scrollTop viewport problem: Adding a personalized value to position().top

I'm currently working on a single-page WordPress site. Since it's all contained on one page, I've implemented jQuery scrollTop to animate the menu when clicked. However, I am facing an issue where the fixed menu is overlapping the content of ...

jqueryhtmlpositionviewportscrolltop

Ways to display HTML elements depending on the width of the window

Is there a way to create visually appealing hexagon containers for text that work well across all window widths? Currently, the design is only satisfactory at certain window sizes. I am looking to implement a solution where specific code will be displayed ...

phphtmlcsssassbootstrap-4

Shift the sleek navigation arrows to the interior of the slides

Is there a way to relocate the navigation arrows on the slider images? I have tried various methods found online with no success. Currently using ASP.NET, but doubt it matters. Employing the latest version of SLICK. Here is the HTML code snippet: <%@ ...

javascripthtmlcssasp.net

Switch the navbar background color from see-through to black

On my website, I have set up a navbar navigation that transitions between a transparent background and a black background as the user scrolls down. However, I would like the black background to be present at all times for the navbar. I built the website us ...

htmlcssbootstrap-4

In AngularJS, the process of replacing text using a filter can be achieved by following

Currently in the process of learning Angular, but I've hit a roadblock and can't seem to find a solution. I have a website that provides USPS shipping options, and I need to replace the default text with my own. The vendor's option shows &ap ...

htmlangularjs

Encountering an issue while trying to execute the pagination page demo in PHP?

<?php include("include/db.inc.php"); $sql = mysql_query("SELECT * FROM emp"); $nr = mysql_num_rows($sql); if(isset($_GET['page'])){ $pn = preg_replace('#[^0-9]#i','',$_GET['page']); ...

phphtmlmysqlpagination

Using JQuery selectors in conditional statements

In the context of my webpage, clicking on a tag filters and displays corresponding posts. I now need to handle pagination to navigate to the next set of posts. However, I am facing difficulties with the JavaScript if statement in jQuery, where I struggle ...

javascriptjqueryhtmlif-statement

Add CSS styles to the outermost container element when the slideshow is currently in use

On my homepage, I have a carousel featuring multiple slides. However, when the third slide appears in the carousel, the positioning of the carousel buttons within the div class="rotator-controls" shifts downward due to the space taken up by the image. My o ...

javascriptjquerycsscycle2

The Google Chart is failing to show up on the screen

I'm having trouble implementing a feature that involves selecting a region from a dropdown list and requesting rainfall data to display in a Google Chart. Unfortunately, I've encountered some issues with it. Could you please help me identify ...

javascriptjqueryhtmlcssgoogle-visualization

Enhance the header image by incorporating background "bars" that add color to the overall design. Alternatively, overlay an image on top of div

I designed a header image for my website, but I'm struggling to make it extend the full width of the user's web browser with black "bars" on the sides. I've attempted a few solutions, but haven't been successful so far. Currently, my c ...

csshtmlstylesheet

Triggering this function when clicked

I am trying to figure out a way to trigger this code onClick instead of automatically. Can anyone help me with this question? Below is the JavaScript code snippet: $("input[type=radio],button").each(function () { var outputName = $(this).attr("d ...

javascriptjqueryhtmlonclickmidi

Button Hover Effect: Transition with Style

I am trying to implement a one-second transition from the default color scheme to the hover color for a Button element in Material UI. I am using the transitions.create(props, options) method as described in this article: https://medium.com/@octaviocoria/c ...

javascriptcssreactjsmaterial-ui

Modify the text color of all input elements with Tailwind

I have been using this code in multiple sections of the app: <label className="input text-neutral-content"> Name <input type="text" className="grow text-base-content"/> </label> While I understand that ...

csstailwind-cssdaisyui

Encountering a glitch while iterating through function results in failure after the initial modification

I am facing some errors with the script provided below: var sections = ["#general_info", "#address_records", "#employment_history", "#driver_experience", "#military_experience", "#eeo_survey", &qu ...

javascriptjqueryhtmlformsvalidation

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

javascriptjqueryhtmlcss

Styling a multilevel list with CSS that includes a combination of

Hello everyone! I am looking to create a mixed multilevel list in CSS, similar to the one shown in this image: image description here. I have attempted the following code snippet, but it seems to apply the counter to unordered lists: ol { counter-res ...

htmlcss

Attempting to place the search bar within the navigation bar

Having trouble positioning a search bar in my nav bar, I'd like it to show on the right side without overlapping any other elements. Tried relative and absolute positioning with no success so far. Any assistance would be greatly appreciated, thank yo ...

javascripthtmljquerycss

What is causing my mobile version not to resize and adjust to fit the screen properly?

Currently utilizing Bootstrap 4 along with the viewport meta tag, %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/ Even after hiding all images with .hidden-xs-up, the display on Chrome mobile appear ...

csstwitter-bootstrapresponsive-design

Can a Material UI Select element be made unresponsive to hover effects?

When a user hovers over an element, I want to achieve the following functionality: document.getElementById("dropdownCategory").disabled = true; <Tooltip arrow placement="right" title={props.description} > <FormControl id="dro ...

cssreactjsmaterial-ui