I am trying to build a cards and stuck at one point.
I want to get the images go smaller relatively as the window size go smaller.
Objective: Pics size go smaller where I can see all 3 images till 600px while they remain at centre till 600px.
And I wrote a media query to get only one image below 600px but cant get the image go relatively smaller when I reduce window size.
Image container should should go smaller but I got stuck.
Any guidance would be helpful?
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.h1{
text-align: center;
position: relative;
}
.card-continer{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* .card{
width: 400px;
height: 380px;
position: relative;
} */
.card .card-image{
width: 400px;
height: 380px;
position: relative;
}
.card:nth-child(1) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
.card:nth-child(2) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
.card:nth-child(3) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
}
#media screen and (max-width: 600px) {
.h1{
text-align: center;
position: relative;
}
.card-continer{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* .card{
width: 400px;
height: 380px;
position: relative;
} */
.card .card-image{
width: 400px;
height: 380px;
position: relative;
}
.card:nth-child(1) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
position: relative;
}
.card:nth-child(2) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
display: none;
}
.card:nth-child(3) .card-image{
background-image: url("https://transcode-v2.app.engoo.com/image/fetch/f_auto,c_lfill,h_128,dpr_3/https://assets.app.engoo.com/images/1ejRYY8i2K7I3VAtaJKbWm.jpeg");
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>trail2</title>
</head>
<body>
<div class="h1">
<h1>Responsive Cards</h1>
</div>
<div class="card-continer">
<div class="card">
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-image">
</div>
</div>
</div>
</body>
</html>
grid would be a better solution in this case. Because you use background images inside div, so you need to set a width and a height. It's not good for responsive.
But with grid you can use fraction to divide your container in 3 columns with the same size. And the fraction will be responsive depends on your screen size.
I made a example with your code
Related
I'm designing a dashboard using Chart.js graphs and Canvases. Please see the dashboard below:
The design is exactly what I want until I resize the page to make it smaller and then resize it again to make it bigger. When I do this I end up with the following:
This did not occur until I added the second chart and made the div element containing them both a flexbox. Before making the div a flexbox I had the following layout:
This can easily be resized into the following form for a smaller window:
and then resized again into the larger form from the previous image. What change has flexbox made that stops the automatic resizing of the charts?
My code is below. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css_styles/main.css">
<title>Plus UI Design</title>
</head>
<body>
<div class="overview_container">
<div id="plusPointsContainer" class="points_container-main">
<div id="plusPointsDoughnut" class="doughnut_holder">
<canvas id="plusPoints" height="400" width="400"></canvas>
</div>
<div class="points_display-horizontal">
<div class="points_display-vertical">
<div>
<div class="points_header">Today:</div>
50
</div>
<div class="points_display-yesterday">
<div class="points_header-smaller">Yesterday:</div>
60
</div>
</div>
</div>
</div>
<div class="bar_chart_container">
<canvas id="overviewBarGraph" height="400" width="600"></canvas>
</div>
</div>
</body>
</html>
CSS:
.overview_container {
display: flex;
}
.bar_chart_container {
max-width: 600px;
max-height: 400px;
}
.points_container-main {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 400px;
min-width: 250px;
max-height: 400px;
min-height: 250px;
margin-right: 5vw;
}
.points_display-horizontal {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.points_display-vertical {
position:relative;
top: 8%;
font-family: Helvetica Neue;
font-size: 70px;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.points_display-yesterday {
font-size: 30px;
text-align: center;
margin-top: -10px;
color: rgba(0, 0, 0, 0.4);
}
.points_header {
font-size: 10px;
margin-bottom: -10px;
}
.points_header-smaller {
font-size: 10px;
margin-bottom: -3px;
}
I have only included the html and css parts as I don't think Javascript is the issue here, but I can update the code section if anyone thinks it is the issue.
Try to remove from .points_container-main and .bar-chart-container max-width, min-width styles. Add them styles in flex world:
.points_container-main{
flex: 0 0 auto;
width: 25%;
}
.bar-chart-container{
flex: 0 0 auto;
width: 75%;
}
I have some squares and I want the smaller squares to stay in the bigger square when you make the screen smaller but so far all they do is overlap
HTML
<div id="Frame">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</div>
CSS
#Frame {
background-color: pink;
width: 90%;
height: 700px;
margin-left: 5%;
}
#box1 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
margin-left: 5%;
margin-top: 20px;
}
#box2 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
margin-left: 48%;
margin-top: 20px;
}
#box3 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
margin-top: 350px;
margin-left: 5%;
}
#box4 {
position: absolute;
background-color: blue;
width: 250px;
height: 300px;
margin-left: 48%;
margin-top: 360px;
}
Here's a link to the jsfiddle with my code
These aren't actual squares, just boxes with auto widths but you can play with the dimensions. You could also add aspect-ratio: 1 / 1; to .grid div and it will give you squares but then it won't always fit every viewport perfectly (plus not sure all browsers support this). Anyway...this should get you started.
`
body {
font-family: sans-serif;
}
.grid {
background: #FFBDBD;
display: grid;
grid-template-columns: auto auto;
grid-row: auto auto;
grid-gap: 24px;
padding: 24px;
}
.grid div {
background: #7FB9D5;
color: #00537C;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="grid">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
</div>
</body>
</html>
I need help fixing this issue. I am trying to create a webpage that has two images within a div. I want it to be centered on the screen. I have done that but I don't want it to scroll. I just want to see the full image regardless of the desktop screen size without having to scroll and also still have equal margin around the div. I am working in VScode but below is a link to what I have done so far. I will really appreciate any solution.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
width: auto;
height: auto;
margin: 70px;
display: flex;
}
.path {
width: 50%;
height: 100vh;
background-color: black;
}
img {
width: 100%;
height: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section id="welcome-page">
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/92/98/oK5D1Z.jpg" alt="">
</div>
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/58/1/NOdDwR.jpg" alt="">
</div>
</section>
</body>
</html>
https://codepen.io/Mike-Olas/pen/zYNVvWr
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
height: 100vh;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
width: auto;
height: auto;
display: flex;
padding: 70px;
height: 100%;
box-sizing: border-box;
}
.path {
width: 50%;
background-color: black;
}
img {
width: 100%;
height: 100%;
}
https://codepen.io/pauan8/pen/KKajVpw
Make your <section id="welcome-page"> occupy all screen with defined padding
Center both .path using flex (row)
Make them occupy full height (but unset their background so you don't see black bleed when the images are too short in height) but max 50% width
Center images within each using flex
Constrain image sizes with max-width and max-height
Snippet below rendered better in full page mode (padding appears too big on small view)
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
box-sizing: border-box;
/*width: auto;*/
height: 100vh;
padding: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.path {
/*background-color: black;*/
max-width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section id="welcome-page">
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/92/98/oK5D1Z.jpg" alt="">
</div>
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/58/1/NOdDwR.jpg" alt="">
</div>
</section>
</body>
</html>
Here's how my child divs look and I'm trying to make them have less space in between when they wrap
I think the problem is in the media query
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
width: 100%;
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
/* added the line above remove if erros */
}
.container-2 {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: red;
align-items: center;
}
.item {
margin: 2% 1%;
width: 95%;
height: 12%;
background-color: yellow;
border: solid black;
border-radius: 1% 1%;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.container-1 img {
width: 50%;
height: 100%;
}
.container-2 {
flex-direction: row;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.item {
margin: 2% 1%;
width: 25%;
height: 12%;
background-color: yellow;
border: solid black;
border-radius: 1% 1%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/menu.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu | Andy's House</title>
</head>
<body>
<div class="container-2">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</body>
</html>
I want to make them have less space between them. If anyone knows how to, it would be greatly appreciated!
P.S: If you couldn't tell, I am a noob. So, I am sorry :(
The problem wasn’t the media query. I would change the container height to auto. Like this:
.container-2 {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
background-color: red;
align-items: center;
}
My first time posting and am looking for some help. I am currently taking an assessment and am stumped on the last part. I am making a picture card with an image above and a circle image to the side as well as some text next to the circle image and below this is what it looks like: https://i.gyazo.com/547948a01bd8f045e6a1b90bd79e113a.png
this is how it needs to look:
https://i.gyazo.com/9426e3f060cdd540581f12da474fc8ca.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
#media screen and (min-width: 600px) {
form {
display: grid;
position: relative;
width: 600px;
margin: 0 auto;
}
}
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
Any help would be awesome! Thank you!
Check out the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<div class="container1">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="container2">
<div><h4>Title goes here</h4></div>
<div><p>Secondary text</p></div>
</div>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
Here we used 2 containers, one for row and one for column elements. You can achieve this easily and more effectively with HTML tables.
Next here is the css:
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
border-radius: 25px;
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
height: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
.container1{
height: 40px;
display: flex;
flex-flow: row nowrap;
}
.container2{
display: flex;
flex-flow: column nowrap;
}
/* ************These styles are junk************ */
/* *********Better to use classes n ids********* */
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
/* ************These styles are junk************ */
Here I added border-radius property to the card to make its corner round. Use border-top-left-radius, border-top-right-radius with image to make its top borders round which gives card a neat look. It is important to give height n width to image, thus I added height property to avatar pic. Lastly, both container classes are set to contain rows and column without wrapping respectively, using flex-flow property. Hope it will help you. Peace.
Add a float property to the .avatar_img class
.avatar_img {
float: left;
}
Wrap title__text and secondary__text inside div,
and then wrap avatar__img and title inside flexbox div.
<div class="card-info">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="card-info-title">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
</div>
</div>
.card-info {
display: flex;
align-items: center;
}
.secondary__text > p {
margin-bottom: 0;
}
Here's CodePen link https://codepen.io/azhkuro/pen/WNrXxpd. Hope it helps you