it seems like i can't get the green "v" mark icon to be at the same line as the paragraph.
the "v" is always above it.
it started when i used flex or grid to space between the paragraph and the icon
i tried justify content , align items padding top nothing changes it.
anyone know how to fix this?
<style>
.content {
background: #3494db;
color: #fff;
width: 65%;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
}
.column1{
color: black;
line-height: 15px;
text-align: right;
margin-top: 5px;
margin-bottom: 10px;
padding-right: 25px;
}
.column2{
color: black;
line-height: 15px;
text-align: right;
margin-top: 5px;
margin-bottom: 10px;
padding-right: 25px;
}
.column1 i {
display: flex;
justify-content: space-between;
margin-left: 10px;
}
.column2 i {
display: flex;
justify-content: space-between;
margin-left: 10px;
}
.column1 p{
border-bottom: 1px #fff solid;
}
.column2 p{
border-bottom: 1px #fff solid;
}
.content i{
color: rgb(50, 230, 50);
font-size: 18px;
}
</style>
</head>
<body>
<div class="content">
<div class="column1">
<p><i class="far fa-check-circle"></i> Free for all</p>
</div>
<div class="column2">
<p> <i class="far fa-check-circle"></i> Free for all</p>
</div>
</div>
</body>
</html>
Instead of having the column1 i and column 2 i have display: flex; change it to display; float; then on both put float: left;
this will move them both checks in line with the paragraph, but the white underline goes through the check marks. To fix this, I added 5px of padding-bottom to column1 p and column2 p. My CSS for those 4 classes looked like this:
.column1 i {
display: float;
justify-content: space-between;
margin-left: 10px;
float: left;
}
.column2 i {
display: float;
justify-content: space-between;
margin-left: 10px;
float: left;
}
.column1 p{
border-bottom: 1px #fff solid;
padding-bottom: 5px;
}
.column2 p{
border-bottom: 1px #fff solid;
padding-bottom: 5px;
}
Let me know if this is what you were looking for!
Related
I have a logo on the far left. There is a div container in the middle and a div container on the far left. All packed together in a div container.
I have the middle container on margin: auto; adjusted so that it has the same distance on both sides.
The problem is that if I move the logo left or right, the middle container also moves. How can I ensure that the middle container always stays in the middle no matter what happens left or right?
body {
margin: 0%;
font-family: Arial, Helvetica, sans-serif;
}
.container1 {
height: 70px;
background-color: #e7e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.container12 {
margin-left: 50px;
}
.container12 h1 {
font-size: 20px;
}
.container13 {
margin-right: 25px;
}
.container13 a {
margin: 0%;
text-decoration: none;
color: black;
float: inline-start;
}
.container13 a:hover {
text-decoration: underline;
}
.trennlinie {
border-right: 1px solid grey;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 12.5px;
}
.trennliniehilfe {
padding-left: 12.5px;
padding-top: 15px;
padding-bottom: 15px;
}
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: flex;
align-items: center;
}
.airbnblogo {
width: 50px;
}
.airbnbcont {
margin-left: 110px;
;
}
.mittecontainer {
display: flex;
margin: auto;
float: inline-start;
background-color: rgb(214, 212, 212);
border: 2px solid black;
border-radius: 15px;
padding-right: 5px;
}
.mittecontainer p {
margin-left: 11.5px;
}
.part3 {
display: flex;
align-items: center;
margin-right: 35px;
}
.derretter {
margin-right: 15px;
}
.interneticon {
margin-right: 15px;
width: 30px;
}
.Pics img {
width: 250px;
vertical-align: middle;
}
.Pics {
display: flex;
justify-content: center;
margin-top: 80px;
border: 2px solid white;
}
.p1 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.p2 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.Pics p {
display: flex;
justify-content: center;
}
.pics2 {
background-color: black;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
border-radius: 10px;
}
.pics2 p {
background-color: black;
color: white;
border: 2px solid white;
border-radius: 15px;
padding: 5px;
}
.pics2 p:hover {
background-color: white;
color: black;
}
.ia {
width: 30px;
}
<!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">
<title>Airbnb.com</title>
</head>
<body>
<div class="container1">
<div class="container12">
<h1>Hier kommt das Airbnb 2022: Winter-Update</h1>
</div>
<div class="container13">
<a class="trennlinie" href="">Film abspielen</a>
<a class="trennliniehilfe" href="">Alle Neuigkeiten entdecken</a>
</div>
</div>
<div class="container2">
<div class="airbnbcont">
<img class="airbnblogo" src="airbnb.png">
</div>
<div class="mittecontainer">
<p class="p1">Irgendwo</p>
<p class="p2">Eine Woche</p>
<p>Gäste hinzufügen</p>
</div>
<div class="part3">
<div class="derretter">
<p>Als Gastgeber:in loslegen</p>
</div>
<div class="interneticon">
<img class="ia" src="internet.png" alt="">
</div>
<div>
<img class="ia" src="menu.png" alt="">
</div>
</div>
</div>
<div class="Pics">
<div class="pics2">
<img src="din1.jpg"> <br>
<p>Jetzt Flug sichern!</p>
<p>Weitere Infos</p>
<p>Standort</p>
</div>
</div>
</body>
</html>
Inside the container2 class in the style tag, replace display: flex; to be display: grid; and add grid-template-columns: 25% 50% 25%;. Like this:
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: grid;
grid-template-columns: 25% 50% 25%;
align-items: center;
}
And don't forget if there are too many CSS styles, then make an external CSS link so that giving css styles is easier.
I really don't know what I'm doing wrong here. I want the image inside the box to stay centered when the window shrinks. Furthermore, I would have thought that align-items: center; would work, but apparently not. The colors are only relevant for me, so I understand what's going on. I don't know if there is a solution for this either, but I hope so. And please ignore the naming and order of the individual classes, I couldn't do better ...:)
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<h20>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</h20>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
h4 and h20 are empty
You're pretty close to getting the image vertically aligned as you wanted. Try this out, and see if this works the way you would like:
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
display: flex;
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
I saw you used align-items: center; in the .insideleft CSS selector which is for aligning a container's children to the center like you want, you'll just want to make this a flexbox to make this work. To do this, simply add display: flex; to the .insideleft selector like in the example. I also removed the <h20> tag from the HTML as this is not valid or necessary.
As for the image shrinking down when the screen width is shrinked - this is because you're using percentages for the widths for all the containers and the image. If you want the image to stop shrinking after a certain point, you can add min-width: 80px; /* (this can be any number of pixels) */ to your .picture selector to make the image stop shrinking once it gets to a certain width of pixels.
Flexbox is super useful for position elements in CSS and I'd recommend looking into this more to have a better understanding. Check out this link here if you'd like an overview of the different flexbox CSS properties.
I am not 100% sure on your intent - Here I changed the class names a bit for clarity and adjusted the markup for a left-middle-right
Not a huge fan of % for padding and margin sizing myself (em feels more clear since it is based on the current font size)
Not strictly needed but I added the containing element class in a few places in CSS for clarity example: .left-pane .picture-container
.page-container {
max-width: 1600px;
text-align: center;
}
.container-box {
display: flex;
align-content: space-between;
}
.container-box .left-pane {
width: 20em;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF0000;
border: 2px solid gray;
}
.left-pane .picture-container {
width: 30%;
background-color: yellow;
align-items: center; /* vertical */
align-content: center; /* horizontal */
}
.left-pane .picture-container .picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.container-box .middle-pane {
width: 70em;
background-color: #FFDDDD;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 1%;
border-left: 2px ridge #ffa54f;
}
.middle-pane .headline {
color: rgb(0, 153, 158);
font-size: 1.5em;
font-family: sans-serif;
margin-bottom: 1em;
background-color: #eeeeee;
}
.middle-pane .textpart {
margin-bottom: 0.5em;
}
.container-box .right-pane {
height: 20px;
border: 2px solid gray;
}
<div class="page-container">
<div class="container-box">
<div class="left-pane">
<div class="picture-container">
<div>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
</div>
</div>
<div class="middle-pane">
<div class="headline">Headline</div>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right-pane">
wawaeaweew
</div>
</div>
</div>
here is how my screen should look like:
the orange button should be on the right of the "dashboard-detail-body" and have margins to the top, left, and bottom ("dashboard-container")
this is what I tried:
<div class="dashboard-detail-body">
<div style="float: right; margin-right: 10px; margin-top: 15px;">
{{ui-5/button label="click me"}}
</div>
<div class="dashboard-container">
but I do not get the desired behavior - no margin bottom (the orange button is overlapping with the bottom div)
margin-bottom, did not solve it, how can I get the desired behavior?
The issue is with the float: right; style. This makes the element overlap.
You can solve this issue by using flex-box, with the following code:
.dashboard-detail-body{
display: flex;
flex-direction:column;
}
.align-right{
align-self: flex-end;
}
<div class="dashboard-detail-body">
<div class="align-right">
I am right
</div>
<div class="dashboard-container">
<p>a<p>
<p>b<p>
<p>c<p>
</div>
</div>
Though it was difficult to understand and recreate your problem from the available data, I assume that you want to align a button center-right inside the container. You can use flexbox to align elements inside a parent.
.container {
height: 200px;
border: solid 1px #333;
display: flex;
justify-content: right;
align-items: center;
}
button.orange {
border: none;
outline: none;
height: 1.5rem;
/* optional basic styling */
background: orange;
color: #fff;
}
<div class="container">
<button class="orange">Click Me</button>
</div>
You can try with css grid:
.dashboard-detail-body{
display: grid;
grid-template-columns: 1fr;
justify-items: center;
border: 1px solid grey;
border-radius: 2em;
}
.right{
justify-self: end;
margin: 1em 3em 1em 1em;
background-color: orange;
padding: .5em;
border-radius: .5em;
}
.dashboard-container {
display: flex;
justify-content: center;
align-items: start;
border: 1px dashed grey;
border-radius: 1.5em;
margin-bottom: 2em;
width: 95%;
height: 200px;
}
.dashboard-container > p {
padding: 1.5em 2em;
margin: 1em;
border: 1px solid grey;
border-radius: .5em;
}
<div class="dashboard-detail-body">
<div class="right">
click me
</div>
<div class="dashboard-container">
<p></p>
<p></p>
<p></p>
</div>
</div>
As you are shrinking your div with float right it frees space on the left. The clear property doesn't work.
So the solution I came up with is to keep the div full & use a button
.dashboard-detail-body {
background: #eeeeee;
border: 3px solid #bbbbbb;
border-radius: 20px;
height: 80vh;
width: 80%;
min-height: 40rem;
min-width: 45rem;
margin: auto;
}
.btn-area {
height: 5rem;
width: 100%;
/* border: 1px solid red; */
}
.btn {
background: #ff9900;
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #9c7842;
/* clear: left; */
/* display: inline-block; */
float: right;
margin-right: 25px;
margin-top: 25px;
}
.dashboard-container {
border: 3px solid #bbbbbb;
margin: auto;
width: 75%;
height: 75%;
border-radius: 20px;
display: flex;
justify-content: center;
/* align-items: center; */
}
.box {
border: 3px solid #bbbbbb;
width: 6.5rem;
height: 6.5rem;
border-radius: 20px;
float: left;
margin: 1rem;
}
<div class="dashboard-detail-body">
<div class="btn-area">
<button class="btn">Click Me</button>
</div>
<div class="dashboard-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I am trying to practice designing an online shop landing page, and I am taking inspiration from Urban Outfitters. I am trying to get the orange promo part to look the same as Urban Outfitters.
I have tried justify-content: center and space-around, or also using padding but that is not very responsive.
Codepen here.
*{
margin: 0px;
padding: 0px;
border-sizing: border-box;
}
#promo{
background-color: #F5C793;
display: flex;
align-items: center;
min-height: 50px;
justify-content: space-around;
}
.promo-link{
color: #222;
text-decoration-color: #222;
}
nav{
display: flex;
border-bottom: 0.3px solid #d3d3d3;
min-height: 40px;
align-items: center;
justify-content: center;
}
.nav-links{
display: flex;
list-style: none;
padding-left: 20px;
}
.nav-links li{
padding-left: 15px;
padding-right: 15px;
}
nav a{
text-decoration: none;
color: #767676;
}
nav a:hover{
color: #b2b2b2;
border-bottom: 1px solid black;
}
.logo{
color: #30336b;
text-transform: uppercase;
padding-left: 50px;
}
.landing-body{
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
display:inline;
}
.landing-page{
display: grid;
grid-template-columns: 49% 2% 49%;
overflow: hidden;
margin-left: 20px;
margin-right: 20px;
}
.three-div{
display: grid;
grid-template-columns: 32% 2% 32% 2% 32%;
overflow: hidden;
margin-left: 20px;
margin-right: 20px;
}
img{
display: inline;
opacity: 1.0;
padding-top: 10px;
width: 100%;
}
img:hover{
opacity: 0.8;
}
<div id="promo">
<p>everything you love, all in one place.</p>
<h3 class="center">MOST ♥ LIKED </h3>
<p>shop</p>
</div>
<nav>
<div class="logo">
<h2>Giants & Dwarfs</h2>
</div>
<ul class="nav-links">
<li id="about">About</li>
<li id="womens">Women's</li>
<li id="mens">Men's</li>
<li id="sale">Sale</li>
</ul>
</nav>
<div class="landing-page">
<img src="https://images.ctfassets.net/q602vtcuu3w3/7rnjSHqBEcgbtJ2pZqZarm/c32a5cbe533a8aab72aee54689ddb7e3/190617-WK3-WGW-4-Update.jpg">
<a></a>
<img src="https://images.ctfassets.net/q602vtcuu3w3/6vo26Ry1p3rcvSURCYBoJH/2fdc52ccb0ee69352d8e02ff905d592a/190603-WK1-LGW-1.jpg">
</div>
<div class="three-div">
<a href="#">
<img src="https://images.ctfassets.net/q602vtcuu3w3/7btvNrhUWJrd5UWYSRHtJr/43f9ce8f23d39c839f9b0e34991d97cc/190603-WK1-MGW-5.jpg">
</a>
<a></a>
<a href="#">
<img src="https://images.ctfassets.net/q602vtcuu3w3/5674zBs4G9hFqVyg2ceT6y/83fd495152f58a7bd12e64d68e541dcd/190617-WK3-HGW-7.jpg">
</a>
<a></a>
<a href="#">
<img src="https://images.ctfassets.net/q602vtcuu3w3/3Rz4KD78yXurQYIyqx6oyC/be018c5eeecd2df0a81471bb81177d8d/190617-WK3-WGW-7.jpg">
</a>
</div>
<div class="exclusives">
</div>
Trying to replicate this, top orange section
I am not a CSS expert by any stretch, but I have played around a bit with it. Have you tried using the following options?
padding-right: 15px;
padding-left: 15px;
margin-left: 1%;
Padding adds space to the left or to the right of your object. Margin adds space around your object. Either can be expressed as pixels or percentage. I have often found percentages to be more reliable for expected output than pixels, but again, I am not an expert so it could be my own unfamiliarity at work there.
For more detail: https://www.w3schools.com/cssref/pr_padding.asp
Hope this helps - happy coding to you!
You can use margins with flexbox, pretty much like align-self with much more control.
#promo {
background-color: #F5C793;
display: flex;
align-items: center;
min-height: 50px;
}
.left {
margin-left: auto;
}
.center {
margin: 0 20px;
}
.right {
margin-right: auto;
}
<div id="promo">
<p class="left">everything you love, all in one place.</p>
<h3 class="center">MOST ♥ LIKED </h3>
<p class="right">shop</p>
</div>
Force your inner elements to display as inline block, add some padding to your center element and flip your promo class from flex to block.
in the below example there are 2 new class (sideMe and sideMeCenter) and a mod to your display property in promo
add the classes to the contained promo elements and should be good to go
.sideMe {
display: inline-block;
margin:10px
}
.sideMeCenter {
padding: 0 40px;
}
*{
margin: 0px;
padding: 0px;
border-sizing: border-box;
}
#promo{
background-color: #F5C793;
display: block;
align-items: center;
min-height: 50px;
justify-content: space-around;
text-align:center;
}
.promo-link{
color: #222;
text-decoration-color: #222;
}
nav{
display: flex;
border-bottom: 0.3px solid #d3d3d3;
min-height: 40px;
align-items: center;
justify-content: center;
}
.nav-links{
display: flex;
list-style: none;
padding-left: 20px;
}
.nav-links li{
padding-left: 15px;
padding-right: 15px;
}
nav a{
text-decoration: none;
color: #767676;
}
nav a:hover{
color: #b2b2b2;
border-bottom: 1px solid black;
}
.logo{
color: #30336b;
text-transform: uppercase;
padding-left: 50px;
}
.landing-body{
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
display:inline;
}
.landing-page{
display: grid;
grid-template-columns: 49% 2% 49%;
overflow: hidden;
margin-left: 20px;
margin-right: 20px;
}
.three-div{
display: grid;
grid-template-columns: 32% 2% 32% 2% 32%;
overflow: hidden;
margin-left: 20px;
margin-right: 20px;
}
img{
display: inline;
opacity: 1.0;
padding-top: 10px;
width: 100%;
}
img:hover{
opacity: 0.8;
}
.exclusives-title{
padding-top: 20px;
text-align: center;
display: grid;
}
.exclusives-title h2{
font-weight: 100;
padding-bottom: 5px;
}
.exclusives{
grid-template-columns: 14% 3.2% 14% 3.2% 14% 3.2% 14% 3.2% 14% 3.2% 14%;
overflow: hidden;
margin-left: 20px;
margin-right: 20px;
}
<div id="promo">
<p class ="sideMe">everything you love, all in one place.</p>
<h3 class="center sideMe sideMeCenter">MOST ♥ LIKED </h3>
<p class="sideMe">shop</p>
</div>
So it looks like this:
this is the example code of a message:
.allMsg {
width: 100%;
}
.self {
border-radius: 1rem;
background-color: #28a745;
text-align: right;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.friend {
text-align: left;
}
#chatWith {
text-align: center;
font-family: sans-serif;
font-size: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
<div class='allMsg'>
<p class='self chatMsg'>Hello</p>
</div>
How can i make the border as big as the text inside ... I thought the padding was going to work but unfortunately it didn't so please help me.
It's possible if you wrap your messages inside another element. So let's say all messages have a full-width element, but friends messages will aligned to the left and have a blue background, while yours will aligned to the right and have a green background. If you don't want to change your markup so much, the easiest is to wrap your messages inside a span, than you doesn't need to change anything else in your html.
.allMsg {
width: 100%;
}
.self span, .friend span {
border-radius: 1rem;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.self span {
background-color: #28a745;
}
.friend span {
background-color: #2845a7;
}
.self {
text-align: right;
}
.friend {
text-align: left;
}
<div class='allMsg'>
<p class='chatMsg friend'>
<span>hello</span>
</p>
<p class='chatMsg self'>
<span>hy</span>
</p>
<p class='chatMsg friend'>
<span>how are you friend?</span>
</p>
<p class='chatMsg self'>
<span>i'm fine thanks</span>
</p>
</div>
You could use flexbox on the container:
.allMsg {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
}
Example:
.allMsg {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
}
.self {
border-radius: 1rem;
background-color: #28a745;
text-align: right;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.friend {
text-align: left;
}
#chatWith {
text-align: center;
font-family: sans-serif;
font-size: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
<div class='allMsg'>
<p class='self chatMsg'>Hello</p>
<p class='self chatMsg'>This is a test</p>
</div>