How can I make this CSS card responsive? - html

Question

Edit: here is a CodePen with CSS / HTML
I spend the weekend creating a CSS card for a website, only to realize that it's not responsive, at all. I'm not very well versed in CSS or responsive design, so I am hoping someone with more experience can help me out. So far, I've tried playing around with the #media tag, but I have not had any success. This is the relevant CSS:
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background: #ffffff;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.courses-container {
}
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
max-width: 100%;
margin: 20px;
overflow: hidden;
width: 1300px;
}
.course h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.course h2 {
letter-spacing: 1px;
margin: 10px 0;
}
.course-preview {
background-color: #2a265f;
color: #fff;
padding: 30px;
max-width: 250px;
}
.course-preview a {
color: #fff;
display: inline-block;
font-size: 12px;
opacity: 0.6;
margin-top: 30px;
text-decoration: none;
}
.course-info {
padding: 30px;
position: relative;
width: 100%;
}
.right-container {
padding: 30px;
background-color: #fff;
width: 30%;
line-height: 200%;
}
.progress-container {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress {
background-color: #ddd;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after {
border-radius: 3px;
background-color: #2a265f;
content: '';
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 10%;
}
.progress-text {
font-size: 10px;
opacity: 0.6;
letter-spacing: 1px;
}

Answer 1

This is a simple suggestion, using CSS Grid. It's a two column card (as yours): the left column width-fixed (300px), the right column width-fluid. I've applied a little gap between them just to make my example clearer.
.card {
max-width: 1000px;
display: grid;
grid-template: "left right" / 300px 1fr;
background-color: #fed330;
border-radius: 10px;
height: 300px;
}
.card>* {
padding: 20px;
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
#media screen and (max-width: 700px) {
.card {
grid-template: "left" "right" / 100%;
}
}
<div class="card">
<div class="left">
Lorem ipsum....
</div>
<div class="right">
Lorem ipsum...
</div>
</div>
It could be a useful starting point.

Answer 2

#gaston
A good way to test and learn about CSS is to use the browser's "Inspect" feature, with which you can test the css behavior in real time.
Activating, Deactivating features, changing values, and adding new ones.
You see the result in real time.
Then just adjust your code according to your tests.
Just right-click on the area you want to inspect. and then Inspect.
You will see an area with HTML and another with CSS.
Click on the areas in HTML and see the corresponding css.
***** Then just test to find the desired result.
That's how I found the solution in your code:
In the ".course" class of your css you added the "width" property twice.
"max-width: 100%;"
"width: 1000px;"
However, the last property entered has priority over the previous ones.
"width: 1000px;" is defining that your card will ALWAYS have 1000px.
SOLUTION:
Just remove: "max-width: 100%;"
And Modify "width: 1000px;" for "max-width: 1000px;"
So your card will have a maximum of 1000px, the minimum will be defined according to the width of the window
It will look like this:
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba (0, 0, 0, 0.2);
display: flex;
margin: 20px;
overflow: hidden;
max-width: 1000px;
}
The #media function will set the css when the screen is adjusted to a minimum or maximum width chosen by you.
What is defined within #media will have priority over other css. but only when the window meets the width you set.
You can use this to change the shape of your card completely to very small screens, placing the purple part on top of the card for example.
If you've solved your problem, mark the right answer to help others.
Good luck.