I am stuck on this simple issue. How the heck do I align my image to the right border of the box? I tried float:right, align-self: end, margin: -4em, I tried most things I found online but nothing.
As you can see I put the image through CSS as a background image for a div. I am stuck.
how it should look
how it is
body{
background-color: hsl(233, 47%, 7%);
display: flex;
justify-content: center;
align-items: center;
margin-top: 6em;
}
.all{
background-color: hsl(244, 38%, 16%);
width: 80em;
height: 28em;
border-radius: 0.725em;
overflow: hidden;
display: flex;
}
.bella{
background-image: url(images/image-header-desktop.jpg);
height: 30em;
width: 30em;
background-repeat: no-repeat;
contain: content;
display: inline-block;
background-position: right;
align-self: flex-end;
clear: left;
float: right;
}
.writings{
font-family: 'Inter';
display: flex;
flex-direction: column;
max-width: 30em ;
margin: 6em;
}
.writings h1{
font-weight: 700;
color: white;
}
#viola{
color: hsl(277, 64%, 61%);
}
.writings p{
color: hsla(0, 0%, 100%, 0.75);
font-weight: 400;
}
.figures{
display: flex;
}
.figures h2{
font-weight: 700;
color: white;
font-family: 'Inter';
}
.figures h5{
color: hsla(0, 0%, 100%, 0.6);
text-transform: uppercase;
font-family: 'Lexend Deca';
letter-spacing: 2px;
}
.fig1{
padding-right: 5em;
}
HTML
<body>
<div class="tutto"></div>
<div class="all">
<div class="writings">
<h1>Get <span id="viola">insights</span> that help your business grow.</h1>
<p> Discover the benefits of data analytics and make better decisions regarding revenue, customer
experience, and overall efficiency.</p>
<div class="figures">
<div class="fig1"><h2>10k+</h2><h5> companies</h5></div>
<div class="fig1"><h2>1314</h2><h5> templates</h5></div>
<div class="fig1"><h2>12M+</h2><h5> queries</h5></div>
</div>
</div>
<div class="bella"></div>
</div>
</div>
</body>
</html>
Remove the float you had set on the div with the background image. This is not needed with flex. Then set your height and width to 100%. I added a dummy image for demonstration purposes. See below.
body {
background-color: hsl(233, 47%, 7%);
display: flex;
justify-content: center;
align-items: center;
margin-top: 6em;
}
.all {
background-color: hsl(244, 38%, 16%);
width: 80em;
height: 28em;
border-radius: 0.725em;
overflow: hidden;
display: flex;
}
.bella {
background-image: url(https://dummyimage.com/600x400/000/fff);
height: 100%;
width: 100%;
/* background-repeat: no-repeat; */
contain: content;
display: inline-block;
background-position: right;
/* align-self: flex-end; */
/* clear: left; */
/* float: right; */
}
.writings {
font-family: 'Inter';
display: flex;
flex-direction: column;
max-width: 30em;
margin: 6em;
}
.writings h1 {
font-weight: 700;
color: white;
}
#viola {
color: hsl(277, 64%, 61%);
}
.writings p {
color: hsla(0, 0%, 100%, 0.75);
font-weight: 400;
}
.figures {
display: flex;
}
.figures h2 {
font-weight: 700;
color: white;
font-family: 'Inter';
}
.figures h5 {
color: hsla(0, 0%, 100%, 0.6);
text-transform: uppercase;
font-family: 'Lexend Deca';
letter-spacing: 2px;
}
.fig1 {
padding-right: 5em;
}
HTML
<body>
<div class="tutto"></div>
<div class="all">
<div class="writings">
<h1>Get <span id="viola">insights</span> that help your business grow.</h1>
<p> Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
<div class="figures">
<div class="fig1">
<h2>10k+</h2>
<h5> companies</h5>
</div>
<div class="fig1">
<h2>1314</h2>
<h5> templates</h5>
</div>
<div class="fig1">
<h2>12M+</h2>
<h5> queries</h5>
</div>
</div>
</div>
<div class="bella"></div>
</div>
</div>
</body>
First, I would try to set the height to 100%. Then consider to make both sides equally wide, if you want it to look exactly like the "how it should look" version. Additionally, your picture has to have the right nativ width and height so that it is as big as the left side of your div.
the problem is in the image you have to attach an image with fixed sizes and if you do not have a fixed size use: background-position: center center; background-size: cover; in this way the image will be spread all over the space without being repeated. If you have a still image, you only need width: 100%; and height: 100%; , the rest will work automatically.
body {
background-color: hsl(233, 47%, 7%);
display: flex;
justify-content: center;
align-items: center;
margin-top: 6em;
}
.all {
background-color: hsl(244, 38%, 16%);
width: 80em;
height: 28em;
border-radius: 0.725em;
overflow: hidden;
display: flex;
}
.bella {
background-image: url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg);
height: 100%;
background-repeat: no-repeat;
width: 100%;
background-position: center center;
background-size: cover;
}
.writings {
font-family: "Inter";
display: flex;
flex-direction: column;
max-width: 30em;
margin: 6em;
}
.writings h1 {
font-weight: 700;
color: white;
}
#viola {
color: hsl(277, 64%, 61%);
}
.writings p {
color: hsla(0, 0%, 100%, 0.75);
font-weight: 400;
}
.figures {
display: flex;
}
.figures h2 {
font-weight: 700;
color: white;
font-family: "Inter";
}
.figures h5 {
color: hsla(0, 0%, 100%, 0.6);
text-transform: uppercase;
font-family: "Lexend Deca";
letter-spacing: 2px;
}
.fig1 {
padding-right: 5em;
}
<div class="tutto"></div>
<div class="all">
<div class="writings">
<h1>Get <span id="viola">insights</span> that help your business grow.</h1>
<p> Discover the benefits of data analytics and make better decisions regarding revenue, customer
experience, and overall efficiency.</p>
<div class="figures">
<div class="fig1">
<h2>10k+</h2>
<h5> companies</h5>
</div>
<div class="fig1">
<h2>1314</h2>
<h5> templates</h5>
</div>
<div class="fig1">
<h2>12M+</h2>
<h5> queries</h5>
</div>
</div>
</div>
<div class="bella"></div>
</div>
</div>
Related
There's a challenge that i wanna solv to enhance on my front-end skills, but in this set of challenge i've been stuggling on trying to fit the image in the entire div box of its parent?!? Also i've been trying to set cart icon next to the icon and it's not going too well.
Here's the challenge that i need solve : -
As you can the image and icon is not really close to the picture above.
Here is the code :
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
}
:root {
--font1: "Fraunces", sans-serif;
--font2: "Montserrat", sans-serif;
--fs-paragraph: 14px;
--fs-header1: 40px;
--primaryColor1: hsl(158, 36%, 37%);
--primaryColor2: hsl(30, 38%, 92%);
--neutralColor1: hsl(212, 21%, 14%);
--neutralColor2: hsl(228, 12%, 48%);
--neutralColor3: hsl(0, 0%, 100%);
}
body {
background-color: var(--primaryColor2);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: auto;
background-color: var(--neutralColor3);
width: 600px;
height: 100%;
border-radius: 1.5em;
}
.img-box {
margin: 0;
padding: 0;
}
.img-box img {
width: 100%;
height: 100%;
}
.details {
display: flex;
flex-direction: column;
}
.details h2 {
font-family: var(--font2);
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
font-size: var(--fs-paragraph);
}
.brand-title p {
font-family: var(--font1);
font-size: var(--fs-header1);
font-weight: bolder;
}
.brand-desc {}
.brand-desc p {
font-family: var(--font2);
font-size: var(--fs-paragraph);
color: var(--neutralColor2);
line-height: 2em;
}
.prices {
display: flex;
align-items: center;
}
.prices h1 {
font-family: var(--font1);
color: var(--primaryColor1);
}
.prices h4 {
font-family: var(--font2);
color: var(--neutralColor2);
text-decoration: line-through;
}
.addcart {
display: flex;
justify-content: center;
align-items: center;
}
.addcart button {
background: url(/images/icon-cart.svg) no-repeat left center;
padding-left: 20px;
background-color: var(--primaryColor1);
font-family: var(--font2);
font-weight: 600;
}
button {
border: none;
border-radius: 0.5em;
color: var(--neutralColor3);
width: 100%;
height: 50px;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz#9..144&family=Montserrat&family=Outfit&display=swap" rel="stylesheet" />
<div class="container">
<div class="img-box">
<img src="/images/image-product-desktop.jpg" alt="" />
</div>
<div class="details">
<div class="brand-title">
<h2>Perfume</h2>
<p>Gabrielle Essence Eau De Parfum</p>
</div>
<div class="brand-desc">
<p>
A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
</p>
</div>
<div class="prices">
<h1>$149.99</h1>
<h4>$169.99</h4>
</div>
<div class="addcart">
<span class="icon"></span>
<button>Add to Cart</button>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
>. Coded by yes.
</div>
I did try to change the size of the image but it doesnt show the result that i want, for the icon i've been playing the position but it does not goes next to text of a button.
I would suggest to use display: grid; in your .container. In the image that you say is your challenge, the image takes half of the container. You can achieve that by creating two <div> inside your container, and then:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
/*More properties*/
}
This will set each div to span half of your container. Your first div should have:
.your-div{
background-image: url('your-image-path')
background-size: cover;
background-position: center;
}
That way you can achieve the left side of your challenge. I would need more information about your problem with the right side. Hope this helped!
*Note: This is just one way of doing this. If you have to strictly use flex, play around with its properties.
As suggested By #aleyo742, grid is here your friend, but you will also need to reset some of your paddings, object-fit can be use too.
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
}
:root {
--font1: "Fraunces", sans-serif;
--font2: "Montserrat", sans-serif;
--fs-paragraph: 14px;
--fs-header1: 40px;
--primaryColor1: hsl(158, 36%, 37%);
--primaryColor2: hsl(30, 38%, 92%);
--neutralColor1: hsl(212, 21%, 14%);
--neutralColor2: hsl(228, 12%, 48%);
--neutralColor3: hsl(0, 0%, 100%);
}
body {
background-color: var(--primaryColor2);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
overflow: hidden;
margin: auto;
background-color: var(--neutralColor3);
max-width: 600px;
border-radius: 1.5em;
}
/* here comes why grid is your handy friend */
#media(max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 250px auto;
}
}
.img-box {
margin: 0;
padding: 0;
}
.img-box img {
width: 100%;
height: 100%;
padding: 0;
object-fit: cover;
}
.details {
display: flex;
flex-direction: column;
}
.details h2 {
font-family: var(--font2);
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
font-size: var(--fs-paragraph);
}
.brand-title p {
font-family: var(--font1);
font-size: var(--fs-header1);
font-weight: bolder;
}
.brand-desc {}
.brand-desc p {
font-family: var(--font2);
font-size: var(--fs-paragraph);
color: var(--neutralColor2);
line-height: 2em;
}
.prices {
display: flex;
align-items: center;
}
.prices h1 {
font-family: var(--font1);
color: var(--primaryColor1);
}
.prices h4 {
font-family: var(--font2);
color: var(--neutralColor2);
text-decoration: line-through;
}
.addcart {
display: flex;
justify-content: center;
align-items: center;
}
.addcart button {
background: url(/images/icon-cart.svg) no-repeat left center;
padding-left: 20px;
background-color: var(--primaryColor1);
font-family: var(--font2);
font-weight: 600;
}
button {
border: none;
border-radius: 0.5em;
color: var(--neutralColor3);
width: 100%;
height: 50px;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz#9..144&family=Montserrat&family=Outfit&display=swap" rel="stylesheet" />
<div class="container">
<div class="img-box">
<img src="https://i.stack.imgur.com/vloym.jpg" alt="" />
</div>
<div class="details">
<div class="brand-title">
<h2>Perfume</h2>
<p>Gabrielle Essence Eau De Parfum</p>
</div>
<div class="brand-desc">
<p>
A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
</p>
</div>
<div class="prices">
<h1>$149.99</h1>
<h4>$169.99</h4>
</div>
<div class="addcart">
<span class="icon"></span>
<button>Add to Cart</button>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
>. Coded by yes.
</div>
I want to achieve this desktop design.
The mobile design has been completed but when I try changing the mobile design to desktop design, I am using a specific flex property row-reverse. When I use the row-reverse property the result looks like this
I am unable to figure out how to fix the position to achieve the desktop design and have been stuck on this problem for the past few days.
Could someone please tell me what am i doing wrong and how do i fix this issue.
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap');
:root {
--color-main-background: hsl(233, 47%, 7%);
--color-card-background: hsl(244, 38%, 16%);
--color-soft-voilet: hsl(277, 64%, 61%);
--color-white-main: hsl(0, 0%, 100%);
--color-white-paragraph: hsla(0, 0%, 100%, 0.75);
--color-white-stats: hsla(0, 0%, 100%, 0.6);
--font-weight-four: 400;
--font-weight-seven: 700;
}
body {
background-color: var(--color-main-background);
font-weight: var(--font-weight-four);
color: var(--color-white-main);
margin: 0;
}
.container {
display: grid;
grid-auto-flow: row;
border-radius: 10px;
justify-content: center;
text-align: center;
align-self: center;
max-width: 350px;
min-height: 750px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
/* padding: 0 2rem; */
background-color: var(--color-card-background);
overflow: hidden;
}
/* .main-img {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
} */
picture>* {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main-header {
font-family: 'Lexend Deca',
sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.5rem;
color: var(--color-white-main);
margin-top: 20px;
}
.insight {
color: var(--color-soft-voilet)
}
.h1-first,
.h1-second {
display: block;
}
.stats,
.heading {
display: block;
}
.paragraph {
margin-top: 5px;
margin-bottom: 30px;
}
.para-1,
.para-2,
.para-3,
.para-4 {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.875rem;
color: var(--color-white-paragraph);
display: block;
line-height: 1.75;
}
.stats {
color: var(--color-white-main);
font-family: 'Inter', sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.25rem;
margin-top: 10px;
}
.heading {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.7rem;
color: var(--color-white-stats);
margin-bottom: 20px;
}
#media (min-width:768px) {
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: row-reverse;
min-height: 400px;
max-width: 50rem;
overflow: hidden;
}
picutre {
max-width: 100%;
max-height: 100%;
}
picture>* {
width: 100%;
height: 400px;
border-top-left-radius: 0px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 0px;
border-top-right-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Stats preview card component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
</style>
</head>
<body>
<div class="container">
<div class="img-component">
<picture>
<source media="(min-width: 768px)" srcset="/images/image-header-desktop.jpg">
<source media="(min-width: 100px)" srcset="/images/image-header-mobile.jpg">
<img class="main-img" src="/images/image-header-mobile.jpg" alt="main image">
</picture>
</div>
<div class="main-header">
<h1><span class="h1-main"> Get <span class="insight">insights</span> that</span>
<span class="h1-first">help your business</span>
<span class="h1-second"> grow.</span></h1>
</div>
<div class="paragraph">
<p>
<span class="para-1"> Discover the benefits of data</span>
<span class="para-2">analytics and make better decisions</span>
<span class="para-3">regarding revenue, customer</span>
<span class="para-4">experience, and overall efficiency.</span>
</p>
</div>
<div class="stat-heading">
<span class="stats">10k+</span>
<span class="heading">COMPANIES</span>
<span class="stats">314</span>
<span class="heading">TEMPLATES</span>
<span class="stats">12M+</span>
<span class="heading">QUERIES</span>
</div>
</div>
</body>
</html>
Hope this will help to restructure your section.
I basically tried to roughly replicate your design using a slightly different approach:
So given the main div (container), let's split it in half creating 2 child div into it, aligning them with d-flex applied to the container.
Into the left one, let's create 2 other divs: one which will contain the header and paragraph and the other which will contain the 3 stats and heading. I will then suggest to wrap each stats and heading into they own div, this will help you to correctly align them on desktop and mobile using d-flex, and related flex-directions.
html,
body {
height: 100%;
}
div {
border: 2px solid red
}
.container {
display: flex;
align-items: center;
}
.box-left {
width: 50%;
background-color: blueviolet;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-right {
width: 50%;
background-color: brown;
height: 500px;
width: 50%;
background-image: url(https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
}
.box-bottom {
display: flex;
justify-content: space-between;
}
.text-wrapper {
padding: 50px;
}
#media (max-width:768px) {
.container {
flex-direction: column-reverse;
}
.box-left,
.box-right {
width: 100%;
}
.box-left {
text-align: center;
}
.box-bottom {
display: flex;
flex-direction: column;
justify-content: center;
}
}
<body>
<div class="container">
<div class="box-left">
<div class="text-wrapper">
<div>
<h1>Your title here</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English.</p>
</div>
<div class="box-bottom">
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
</div>
</div>
</div>
<div class="box-right">
</div>
</div>
</body>
I am trying to make the text sit vertically in the middle next to the diamond box with the number like this:
Currently I have this code:
.diamond {
width: 50px;
aspect-ratio: 1;
font: 20pt Arial, sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
background: #EB008B;
margin: 20px;
margin-bottom: 0px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.image-txt-container {
display: flex;
align-items: center;
flex-direction: row;
}
.pf-title {
margin-right :auto;
}
<div class="image-txt-container">
<div class="diamond">1
</div>
<h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>
.diamond {
width: 50px;
aspect-ratio: 1;
font: 20pt Arial, sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
background: #EB008B;
margin: 20px;
margin-bottom: 0px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.image-txt-container {
display: flex;
align-items: baseline;
flex-direction: row;
}
.pf-title {
margin-right: auto;
font-size: 30px;
}
<div class="image-txt-container">
<div class="diamond">1
</div>
<h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>
I think You want something like this
By writing margin:20px, you add 20px margins.
And with your margin-bottom:0px you remove this margin which means that your text is no centered.
If you only need a right margin you can use margin-right:20px;
.diamond {
width: 50px;
aspect-ratio: 1;
font: 20pt Arial, sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
background: #EB008B;
margin-right: 20px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.image-txt-container {
display: flex;
align-items: center;
flex-direction: row;
}
.pf-title {
margin-right :auto;
}
<div class="image-txt-container">
<div class="diamond">1
</div>
<h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>
your question has been answered up there. I tried to give a different answer
so i remove the margin from .diamond and give padding to .pf-title
like this
.diamond {
width: 50px;
aspect-ratio: 1;
font: 20pt Arial, sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
background: #EB008B;
/* margin: 20px; */ <--- remove
margin-bottom: 0px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.image-txt-container {
display: flex;
align-items: center;
flex-direction: row;
}
.pf-title {
padding: 10px; <--- add
margin-right :auto;
}
<div class="image-txt-container">
<div class="diamond">1</div>
<h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>
I hope this help and can be another reference for you
Try this then tell me plz if it works
If you want diffrent size just change
Width AND FLEX AND H4
.diamond {
width: 60%;
aspect-ratio: 1;
font: 20pt Arial, sans-serif;
color: white;
display: flex;
flex:30%;
justify-content: center;
align-items: center;
background: #EB008B;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.image-txt-container {
display: flex;
align-items: center;
justify-content:space-evently;
flex-direction: row;
padding:0 5%;
gap: 6%;
}
<div class="image-txt-container">
<div class="diamond">1
</div>
<h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>
You should remove margin: 20px from diamond div .. instead add it to the container of both diamond and text ..
Consider adding (margin right to the diamond shape OR margin left to h4 ) to create space before text
.diamond {
width: 50px;
aspect-ratio: 1;
font: 20pt Arial, sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
background: #EB008B;
/*margin: 20px;
margin-bottom: 0px;*/
/* Add margin right only*/
margin-right: 20px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.image-txt-container {
display: flex;
align-items: center;
flex-direction: row;
/*Add margin to the container*/
margin: 20px;
}
/* No need for this
.pf-title {
margin-right: auto;
}*/
<div class="image-txt-container">
<div class="diamond">1</div>
<h4 class="pf-title">BRIDGING / SHORT-TERM FINANCE</h4>
</div>
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 10 months ago.
I want to keep the button at bottom previously which I was making it possible by writing more text to push it to bottom but it wasn't responsive for every device any way I can keep the button in a div at bottom?
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
Codepen
My solution would be:
.container {
display: flex;
flex-flow: column nowrap; /* Flex everything inside your cards vertically */
}
.description {
flex-grow: 1;
/*
When a card has more space (because another card is taller
with more info) - grow the description
*/
}
Here is a working snippet, click Full page top right to see it working:
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
display: flex;
flex-flow: column nowrap;
align-items: center;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
flex-grow: 1;
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
I want to transform the main to display:column when max-width:1220px.
And I'm doing this
#media (max-width: 1220px) {
.main {
flex-direction: column;
}
But when the width it's 1220px the image desapear.
What I am doing wrong?
This is the Code Pen link to be easier.
https://codepen.io/Rvssco/pen/LYzGYgV
Thank you in advance!
The image is disappearing because you have included the src of the image in CSS and not html, flex-direction is not able to detect the presence of image when changing direction and hence the image doesn't appear. You can see my code how I have done it.
body {
background-color: hsl(233, 47%, 7%);
color: white;
}
h1,
p {
margin: 0;
}
h1 {
font-family: "Lexend Deca", sans-serif;
}
.desc {
font-family: "Inter", sans-serif;
font-weight: 400;
color: hsla(0, 0%, 100%, 0.75);
}
span {
color: hsl(277, 64%, 61%);
}
.wrap {
height: 98vh;
width: 98vw;
display: flex;
justify-content: center;
align-items: center;
}
.main {
display: flex;
width: 85%;
height: 80%uto;
border-radius: 10px;
background-color: hsl(244, 38%, 16%);
flex-direction: row;
}
.left {
padding: 5rem;
padding-right: 0;
display: flex;
flex-direction: column;
width: 50%;
}
.text-container .title {
margin-bottom: 2rem;
font-size: 2.5rem;
font-weight: 600;
}
.desc {
margin-bottom: 5rem;
line-height: 1.5rem;
word-spacing: 0.3rem;
font-family: "Inter", sans-serif;
}
.stats-desc {
font-family: "Inter", sans-serif;
color: hsla(0, 0%, 100%, 0.6);
}
.stats-container {
display: flex;
justify-content: space-between;
font-size: 15px;
width: 70%;
}
.right {
width: 50%;
/* background-image: url(./1.png); */
background-size: cover;
background-repeat: no-repeat;
}
.stats h1 {
font-family: "Inter", sans-serif;
}
.filter {
height: 100%;
width: 100%;
background-color: hsla(277, 88%, 32%, 0.603);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.left {
text-align: center;
}
#media (max-width: 1000px) {
.main {
/* display: block; */ /* Option 2*/
flex-direction: column-reverse;
background-color:red; /*Used for testing please remove*/
}
.left {
text-align: center;
}
/*Small modification in filer and right classes*/
.filter {
height: 100%;
width: 100%;
background-color: hsla(277, 88%, 32%, 0.603);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.right {
height: 50%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
}
<div class="wrap">
<div class="main" role="main" >
<div class="left">
<div class="text-container">
<h1 class="title">
Get <span>insights</span> that help your business grow.
</h1>
</div>
<p class="desc">
Discover the benefits of data analytics and make better decisions
regarding revenue, customer experience, and overall efficiency.
</p>
<div class="stats-container">
<div class="stats">
<h1>10k+</h1>
<p class="stats-desc">COMPANIES</p>
</div>
<div class="stats">
<h1>314</h1>
<p class="stats-desc">TEMPLATES</p>
</div>
<div class="stats">
<h1>12M+</h1>
<p class="stats-desc">QUERIES</p>
</div>
</div>
</div>
<div class="right">
<img class="filter" src= ./1.png>
</div>
</div>
</div>
I don't know the exact reason behind this, probably someone with higher depth knowledge would be able to comment.
If you still want to use the url from CSS you can still use it but instead changing the
flex-direction:column
do
diplay:block
Secondly, when you are using the media query, you need to redefine the classes used for image and its display(.filter and .right). Otherwise the changes will not be applied to them, this was kind of an obvious mistake which I observed.
Also you have re-defined media query twice and there is a mistake in CSS in using {} brackets.