The dimensions of the cards adjust automatically when the flex direction is set to row

My cards, created in CSS and React.js, have a set height and width. However, when I change the flex direction from column to row, the cards automatically shrink in size. Why is this happening?

Card's CSS and JS code

CSS

.card{
    height: 50%;
    width: 30%;
    min-width: 30%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
}

.card:hover{
    cursor: pointer;
}

img{
    height: 80%;
    width: 100%;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.schoolName{
    font-weight: 700;
    color: #100F0F;
    margin-top: 10px;
    margin-left: 4px;
}

.sub{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.schoolLocation{
    color: #100F0F;
    margin-left: 4px;
}

.reviews{
    color: #100F0F;
    margin-right: 4px;
}

@media only screen and (max-width: 600px){
    .card{
        height: 40%;
        width: 80%;
    }
    .schoolName{
        font-size: 20px;
    }
}

JS

    <div className={PopularCardCSS.card}>
          <img src={props.schoolImage} alt="school" />
      <div className={PopularCardCSS.cardContent}>

            <h2 className={PopularCardCSS.schoolName}>{props.schoolName}</h2>

            <div className={PopularCardCSS.sub}>
              
            <p className={PopularCardCSS.schoolLocation}>
              {props.schoolLocation}
            </p>
            <p className={PopularCardCSS.reviews}>
              <span className={PopularCardCSS.rating}>{props.reviews} reviews</span>
            </p>

            </div>
      </div>
    </div>

The component that calls the card

CSS

.parent{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    background-image: url(../assets/background2.jpeg);
    background-size: cover;
}

.glass{
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    height: 100vh;
    /* display: flex;
    flex-direction: row; */
}

.cardContainer{
    display: flex;
    flex-direction: row;
}

JS

    <div className={PopularCSS.card}>
        <div className={PopularCSS.parent}>
          <div className={PopularCSS.glass}>
            <h1 className={PopularCSS.title}>Popular Schools</h1> 
           
            <div className={PopularCSS.cardContainer}>
            <div className= {PopularCSS.school}>
            <PopularCard
            schoolImage = {schoolimage}
            schoolName="Ron Arad" 
            schoolLocation="Rehovot" 
            reviews="4"
            />
            </div>

            <div className= {PopularCSS.school}>
            <PopularCard
            schoolImage = {schoolimage}
            schoolName="Ron Arad" 
            schoolLocation="Rehovot" 
            reviews="4"
            />
            </div>

I attempted adding a flex wrap or setting min-height/min-width but there was no change.

Answer №1

The term Flex speaks for itself - it's all about being adaptable. I recommend testing it out with the highest possible values.

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

How can I pass a JavaScript variable through the URL in a Rails 4 application to access it in the controller?

Struggling to pass the value of a JavaScript variable in the URL and then retrieve it in my Rails 4 app controller using param[:my_variable]. Despite trying various methods, none seem to work for me. I am unable to successfully pass my JavaScript variable ...

How to send a value to a function in Angular from a different function?

Within my Angular Typescript file, I am working with two functions named data and lists. My goal is to pass the variable windows from the function data to the function lists. However, when attempting to call the function lists, I encounter an error: Canno ...

Tips for incorporating jQuery UI into Angular 6

No matter how many methods I have tried from StackOverflow, I cannot seem to get jquery-ui to work in my angular 6 component. Here's what I've attempted: I went ahead and ran npm install jquery jquery-ui to install both jquery and jquery-ui. ...

Encountering the issue of "TypeError: Cannot read property 'file' of undefined" when trying to upload a video with Multer

The objective is to select a video file from the desktop and upload it to the platform. The uploaded video file will then be automatically posted to a specified Youtube channel using GCD. An error message I encountered is:"react-dom.development.js:40 ...

What is the best way to adjust the padding in a Material-UI autocomplete component?

I'm looking to adjust the height of the material-ui autocomplete control, and I came across a useful example for modifying the outline color using createMuiTheme on the Autocomplete's TextField. You can see the code in this codesandbox: Code Exam ...

Sass compilation with source mapping

Is there a more efficient method to compile my sass files with sourcemap enabled other than using the command below? sass --compass --sourcemap --style compact --watch sass:css In the case of utilizing compass, 'compass watch' would be the pref ...

Typescript enhances Solid JS by using the "as" prop and the "component" prop

Hey there, I've been experimenting with solid-js lately and I'm facing a challenge integrating it with typescript. My objective is to make my styling more modular by incorporating it within my components. type RelevantTags = Exclude<keyof ...

Display a div in front of another using Material UI when hovering

Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

Steps to create a continuous blinking/flickering effect on a highchart pathfill

I am currently utilizing highcharts within one of my applications. I want to emphasize a particular stroke based on the content, and while I have achieved this already, I now need it to blink or flicker as if indicating an issue at that specific point. C ...

Unexpected output from nested loop implementation

Having some arrays, I am now trying to iterate through all tab names and exclude the values present in the exclusion list. json1 ={ "sku Brand": "abc", "strngth": "ALL", "area ...

What is the best way to delay JavaScript execution until after React has finished rendering?

Perhaps this is not the exact question you were expecting, but it did catch your attention :) The issue at hand revolves around the fact that most of the translations in my text do not update when the global language changes. Specifically, the translation ...

Can you show me the steps for linking the next method of an EventEmitter?

After emitting an event, I am looking to run some additional code. Is there a method to chain the .next() function in this way? @Output() myEvent = new EventEmitter<string>(); this.myEvent.next({‘test string’}).onComplete(console.log('done& ...

What is the process of transferring a csv file from a React.js frontend to an Express backend?

I encountered an issue while trying to upload a CSV file from React.js to a backend express. When I click the "Save" button on the frontend, nothing happens and there's no response in the Chrome browser network inspection tab. Can anyone assist me wit ...

Tips for aligning a button in the center of an image across different screen sizes using CSS or bootstrap

I currently have a centered button on my hero image, but the issue is that I would need to use multiple media queries to ensure it stays centered on all screen sizes. <style> .hero-container{ position: relative; text-align: center; } .her ...

What sets apart using 'self.fn.apply(self, message)' from 'self.fn(message)', and what are the advantages of using the former method?

Whenever I come across code that looks like thisnewPromise.promiseDispatch.apply(newPromise, message), I can't help but wonder why they didn't simply use newPromise.promiseDispathch(message) ...

webdriverIO encountered an unhandled promise rejection, resulting in a NoSuchSessionError with the message "invalid session id

I am currently learning how to conduct UI testing using Jasmine and WebdriverIO in conjunction with NodeJS. Below is a snippet of my test code: const projectsPage = require('../../lib/pages/projects.page'); const by = require('selenium-we ...

Creating a stunning HTML 5 panorama with GigaPixel resolution

Interested in creating a gigapixel panorama using HTML 5 and Javascript. I found inspiration from this example - Seeking advice on where to begin or any useful APIs to explore. Appreciate the help! ...

What is the best way to split a Bootstrap row into five equal-sized columns?

Trying to divide a Bootstrap row into five columns can be tricky when you only have 12 units available on the device. How can this division be achieved successfully? ...

Here's a simple script to display a div or popup only once in the browser using plain vanilla JavaScript

// JavaScript Document I'm attempting to make a popup appear in the browser only once. I believe using local storage is the key, but all I can find are solutions involving jQuery. I really want to achieve this using plain JavaScript without relying ...