I am trying to create 3 cards that stand at the bottom of the webpage but the 3 cards are overlapping. Can you help me find my mistake please? :)
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
height: 455px;
cursor: pointer;
position: absolute;
margin-left: 4%;
bottom: 10px;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
The problem was caused by the position: absolute; style in your CSS. Basically, you set all 3 cards to the same position which is why they overlapped.
I also changed your card's height to min-height. This is because the text was flowing out of the card and min-height would prevent this.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
min-height: 455px;
cursor: pointer;
margin-left: 4%;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
remove "position: absolute" and things would work fine. Or if you're trying to display somethign else?
Related
I have a CSS mockup I am working on but I am having trouble centering the search-bar element in relation to the phone element. Hence it is only centered when the phone element is in the middle of the screen (when the viewport is mobile) but not when it's large.
How can I center the absolute child element (search) in relation to the parent (phone)?
It should look like this regardless of where the parent element is on the screen:
EDIT: If I add the display: relative to the phone element the search-bar cuts off due to the overflow-v: hidden - for some reason overflow-h: visible isn't respected as touched on here: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
.phone {
display: block;
height: 649px;
width: 300px;
overflow-y: hidden;
background-color: #ffffff;
border-radius: 35px;
box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
border:10px solid;
border-color: #ffffff;
}
.glogo {
margin: 15px auto 10px;
width: 175px;
}
.search-bar {
margin: auto;
inset: auto 0;
position: absolute;
background-color: #ffffff;
height: 60px;
width: 425px;
box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
border-radius: 6px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.search-bar span {
font-family: Arial, Helvetica, sans-serif;
color: #3c4043;
font-size: 18px;
margin: auto 65px auto;
}
.search {
position: absolute;
top: 0;
bottom: 0;
margin: auto 15px auto;
height: 35px;
width: 35px;
}
.search-result-wrapper {
margin-top: 85px;
}
.search-result {
margin: 0 auto 7px;
padding: 22px 26px 22px 22px;
width: 250px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
}
.result-line {
height: 10px;
margin: 0 0 10px;
border-radius: 2px;
}
.result-line:nth-child(1) {
background-color: #000;
width: 92%;
}
.result-line:nth-child(2) {
background-color: #000;
width: 75%;
}
.result-line:nth-child(n+3) {
background-color: #000;
}
.result-line:nth-child(3) {
width: 100%;
}
.result-line:nth-child(4) {
width: 95%;
margin: 0;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
<div class="flex flex-wrap lg:items-center min-h-screen">
<div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">
<div class="phone">
<img src="https://via.placeholder.com/1125x132" class="status-bar">
<img src="https://via.placeholder.com/175x57" class="glogo">
<div class="search-bar">
<img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
</div>
<div class="search-result-wrapper">
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap w-full lg:w-1/2 justify-center">
<h3 class="text-3xl">Content here</h3>
</div>
So here is my solution to you:
add position: relative to .phone
add left: calc(-25vw + 50px); and right: calc(-25vw + 50px); (tweak as you prefer these values)
add padding-top to handle border-radius
remove inset and overflow-y: hidden
remove height from phone
Toggle Full Page in the snippet to see result in larger screen
console.clear()
.phone {
display: block;
width: 300px;
background-color: #ffffff;
box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
border: 10px solid;
border-color: #ffffff;
border-radius: 35px;
padding-top: 10px;
position: relative;
}
.glogo {
margin: 15px auto 10px;
width: 175px;
}
.search-bar {
margin: auto;
position: absolute;
background-color: #ffffff;
height: 60px;
width: 425px;
box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
border-radius: 6px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
left: calc(-25vw + 50px);
right: calc(-25vw + 50px);
}
.search-bar span {
font-family: Arial, Helvetica, sans-serif;
color: #3c4043;
font-size: 18px;
margin: auto 65px auto;
}
.search {
position: absolute;
top: 0;
bottom: 0;
margin: auto 15px auto;
height: 35px;
width: 35px;
}
.search-result-wrapper {
margin-top: 85px;
}
.search-result {
margin: 0 auto 7px;
padding: 22px 26px 22px 22px;
width: 250px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
}
.result-line {
height: 10px;
margin: 0 0 10px;
border-radius: 2px;
}
.result-line:nth-child(1) {
background-color: #000;
width: 92%;
}
.result-line:nth-child(2) {
background-color: #000;
width: 75%;
}
.result-line:nth-child(n+3) {
background-color: #000;
}
.result-line:nth-child(3) {
width: 100%;
}
.result-line:nth-child(4) {
width: 95%;
margin: 0;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
<div class="flex flex-wrap lg:items-center min-h-screen">
<div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">
<div class="phone">
<img src="https://via.placeholder.com/1125x132" class="status-bar">
<img src="https://via.placeholder.com/175x57" class="glogo">
<div class="search-bar">
<img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
</div>
<div class="search-result-wrapper">
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap w-full lg:w-1/2 justify-center">
<h3 class="text-3xl">Content here</h3>
</div>
Please use the sample code in the justify content section of this page in order to center your child element with respect to the parent: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
It's based on the Boostrap UI framework and allows you to use the flex feature with your div tags in order to help get the CSS arrangement that you're looking for.
I would ask that you test the sample code in a copy of your original code first before updating your initial code permanently. Once you get that CSS code to work, then you can move onto your other CSS goals.
I'm hoping someone can help me out with this...I'm tearing my hair out. I want to create a few sections that scroll horizontally. I looked at Netflix's code to model this, and I finally got the overflow to bleed all the way to the edges of the browser window, and the beginning and end of the row both line up with the margins on the page. But now when I scroll, the entire page scrolls.
How do I get this section to scroll independently while still letting the overflow reach the edges of the page? Is this possible with just css?
body {
background-color: #F5F5F5;
}
.row {
display: flex;
}
.landing-banner {
display: -webkit-flex;
display: flex;
height: 80vh;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
/* position: sticky;
left: 0; */
}
.content-block {
margin: 0 4%;
}
.hero {
font-family: "Apercu-Regular";
line-height: 40px;
}
.lolomoRow {
margin: 3vw 0;
margin-bottom: 10px;
padding: 0;
position: relative;
outline: 0;
z-index: 0;
}
.rowContainer {
position: relative;
z-index: 0;
}
.rowContainer .rowContent {
padding: 0;
box-sizing: border-box;
}
.slider {
position: relative;
margin: 0;
padding: 0 4%;
touch-action: pan-y;
}
.slider .sliderMask .showPeek {
display: flex;
flex-direction: row;
overflow-x: auto;
}
.slider .sliderMask {
padding-bottom: 1px;
}
.sliderContent {
white-space: nowrap;
}
.slider .sliderMask .sliderContent .slider-item:first-child {
padding-left: 0;
}
.slider .sliderMask .sliderContent .slider-item {
box-sizing: border-box;
z-index: 1;
display: inline-block;
position: relative;
white-space: normal;
vertical-align: top;
padding: 0 2px;
}
.bd::-webkit-scrollbar {
display: none;
}
.project-card {
background-color: white;
width: 400px;
border-radius: 12px;
box-shadow: 0px 0px 8px rgba(112, 144, 176, 0.12);
margin-right: 16px;
flex: 0 0 auto;
}
<body>
<div class="landing-banner">
<wrapper>
<div class="row content-block">
<h1 class="hero">
If you scroll anywhere, the entire page scrolls horizontally. I only want the section below to scroll while still remaining full bleed.
</h1>
</div>
</wrapper>
</div>
<wrapper style="width: fit-content; display: inline-block; padding: 0 4%; position: sticky; left: 0;">
<h2>case studies</h2>
</wrapper>
<div class="slider">
<div class="sliderMask showPeek">
<div class="sliderContent row-with-x-columns">
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You need to add overflow-Y: scroll; to the slider class as can be seen below. This tells it that it is what needs the scroll bar not the entire document.
Here is the MDN documentation for overflow
MDN Docs
body {
background-color: #F5F5F5;
}
.row {
display: flex;
}
.landing-banner {
display: -webkit-flex;
display: flex;
height: 80vh;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
/* position: sticky;
left: 0; */
}
.content-block {
margin: 0 4%;
}
.hero {
font-family: "Apercu-Regular";
line-height: 40px;
}
.lolomoRow {
margin: 3vw 0;
margin-bottom: 10px;
padding: 0;
position: relative;
outline: 0;
z-index: 0;
}
.rowContainer {
position: relative;
z-index: 0;
}
.rowContainer .rowContent {
padding: 0;
box-sizing: border-box;
}
.slider {
overflow-Y: scroll;
position: relative;
margin: 0;
padding: 0 4%;
touch-action: pan-y;
}
.slider .sliderMask .showPeek {
display: flex;
flex-direction: row;
overflow-x: auto;
}
.slider .sliderMask {
padding-bottom: 1px;
}
.sliderContent {
white-space: nowrap;
}
.slider .sliderMask .sliderContent .slider-item:first-child {
padding-left: 0;
}
.slider .sliderMask .sliderContent .slider-item {
box-sizing: border-box;
z-index: 1;
display: inline-block;
position: relative;
white-space: normal;
vertical-align: top;
padding: 0 2px;
}
.bd::-webkit-scrollbar {
display: none;
}
.project-card {
background-color: white;
width: 400px;
border-radius: 12px;
box-shadow: 0px 0px 8px rgba(112, 144, 176, 0.12);
margin-right: 16px;
flex: 0 0 auto;
}
<body>
<div class="landing-banner">
<wrapper>
<div class="row content-block">
<h1 class="hero">
If you scroll anywhere, the entire page scrolls horizontally. I only want the section below to scroll while still remaining full bleed.
</h1>
</div>
</wrapper>
</div>
<wrapper style="width: fit-content; display: inline-block; padding: 0 4%; position: sticky; left: 0;">
<h2>case studies</h2>
</wrapper>
<div class="slider">
<div class="sliderMask showPeek">
<div class="sliderContent row-with-x-columns">
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If you want to model it after Netflix (as mentioned in the question), I don't believe they have a scroll bar usually, so that would be targeting the scrollbar for the slider and you would probably want to add something like:
/* Hide scrollbar for Chrome, Safari and Opera */
.slider::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.slider {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
However for accessibility reasons it is generally frowned upon hiding scroll bars unless blatantly obvious that it is a scroll-able element;
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I trying to make a 2 parallel div in center to show the user info. Left div contain the user image and the name while the right div show the login details such as login name, position, department and etc. I been try set the line height same as my div height but the result is not what i want, or may be the line height doesn't fix the issue or i using the wrong way to achieve this. Beside this, I have try set the both div to inline-flex and make the 2 div float left. This can make the 2 div in parallel but not in the center of the page. Any better way to achieve this?
my code
<div style="text-align: center; width: 80%; margin: auto;">
<div
style="
display: inline-block;
width: 240px;
height: 270px;
text-align: center;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
"
>
<img
id="pf-img"
style="display: block; text-align: center; margin: 21px 45px 0px; border-radius: 50%; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);"
src="/assets/images/avatar_v3.png"
alt=""
width="150px"
/>
<div style="margin: 40px 0px;">
<span>Name</span>
</div>
</div>
<div style="display: inline-block; margin-left: 30px;">
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
</div>
</div>
My result:
my result image
I am not sure why you are bringing up flex when you are not using such CSS feature.
Adding the CSS property vertical-align: top; to left column should do the trick.
<div style="text-align: center; width: 80%; margin: auto;">
<div
style="
display: inline-block;
width: 240px;
height: 270px;
text-align: center;
vertical-align: top;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
"
>
<img
id="pf-img"
style="display: block; text-align: center; margin: 21px 45px 0px; border-radius: 50%; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);"
src="/assets/images/avatar_v3.png"
alt=""
width="150px"
/>
<div style="margin: 40px 0px;">
<span>Name</span>
</div>
</div>
<div style="display: inline-block; margin-left: 30px;">
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
</div>
</div>
Okay, before that I have some tips:
1 ° Avoid in-line styling
This makes the HTML code confusing, difficult to read
2 ° Use CSS classes
Classes allow you to apply the same style to several elements at the same time
3 ° Use correct marking
Divs are generic containers for other elements. They serve to group and separate elements of the page. You have only used divs to structure the entire page, not taking advantage of the semantic meaning of other elements of HTML.
Having made these observations, the solution I propose is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.user-info-container {
display:flex;
}
.user-img {
margin-right: 1rem;
}
.user-img img {
width: 100%;
height: auto;
}
.user-info-badge {
display:flex;
align-items:center;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
padding: 0.5rem 1rem;
margin-bottom: 1rem;
}
.user-info-badge:last-child {
margin-bottom: 0;
}
.user-info-badge h3 {
width: 150px;
text-align:left;
}
</style>
</head>
<body>
<div class="user-info-container">
<div class="user-img">
<img src="/assets/images/avatar_v3.png">
</div>
<div class="user-info-badges">
<div class="user-info-badge">
<h3>Username</h3>
<span>teste183</span>
</div>
<div class="user-info-badge">
<h3>Email</h3>
<span>teste.teste#teste.com</span>
</div>
<div class="user-info-badge">
<h3>Nascimento</h3>
<span>05-02-2020</span>
</div>
</div>
</div>
</body>
</html>
I want to place the picture neatly in the middle and to the left of the of the box and the font in the middle of it. However, when I mess around with the margins and padding, it doesn't work out the way I want it to.
Here is my CSS and HTML for it.
CSS
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
margin: auto;
}
.make-center {
text-align: center;
}
.media-content {
font-size: 100px;
}
.card {
margin-bottom: 15px;
margin: 150px auto auto auto;
width: 2000px;
border-color: #1abc9c;
}
.card-content {
width: 3000px;
height: 200px;
}
.wrapper {
/* border-bottom: 10px solid #1abc9c; */
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0px 10px 20px -6px #1abc9c;
border-radius: 100px;
margin: 200px auto;
background: white;
width: 50%;
height: 150px;
padding: 40px 20px;
}
.celeb-name {
padding: 5px 10px 10px 5px;
}
The .celeb-name does not place the celebrity's name in the middle when I include the picture and the picture becomes deformed when I use the 'padding' feature in CSS.
HTML
<div class="star-list" id="star-box">
<div class="star-list" id="star-box">
<div class="card" data-name="${name}\">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://api.buzzanglemusic.com/images/artists/1374"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<p>1. DRAKE</p>
</div>
</div>
</div>
</div>
</div>
</div>
I would utilize CSS Flexbox.
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid green;
border-radius: 500px;
width: 200px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 6px 1px rgba(109, 103, 104, 0.88);
}
.celeb-img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-left: 5px;
}
.celeb-name {
margin-left: auto;
margin-right: auto;
font-size: 1rem;
text-transform: uppercase;
}
<div class="container">
<img class="celeb-img" src="https://api.buzzanglemusic.com/images/artists/1374" alt="Placeholder image" />
<p class="celeb-name">1. Drake</p>
</div>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
margin-top: 25%;
box-size: border-box;
}
.star-list {
display: flex;
align-items: center;
padding: 5px;
width: 200px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0px 10px 20px -6px #1abc9c;
background-color: #fff;
border-radius: 100px;
height: 40px;
}
.star-list > img {
height: 40px;
border-radius: 50%;
}
.star-list > .media-content {
width: 100%;
display: flex;
justify-content: center;
font-weight: 600;
font-size: 20px;
}
<div class="star-list" id="star-box">
<img src="https://api.buzzanglemusic.com/images/artists/1374" alt="Placeholder image" />
<span class="media-content">
1. DRAKE
</span>
</div>
use flex-box to align the items center
code :
display : flex;
align-items : center;
And you don't have to use that much of divs, try to make it cleaner
Above is the improved code, if you want
You can achieve this using CSS flexbox, try making div media as flexbox and then aligning its inner content as you want like,
.media{
display:flex;
align-items:center; /* will make the inner divs align vertically centered */
}
.media-left{
width:40%; /* or as required */
}
.media-content{
width:60%; /* or as required */
font-size: 100px;
}
You can get the desired output by using CSS Flexbox.
In your case, add flex to the container(media) which is wrapping both image and name.
.media{
display:flex;
justify-content:space-between;
align-items:center;
}
If you're willing to use Bootstrap, then you could utilize some of the many powerful classes within the framework.
For instance, you could make use of the flexbox classes and the grid system, as well as the responsive image classes.
HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap-rounded d-flex">
<div class="d-flex flex-row align-self-center justify-content-start">
<div class="col-6 d-flex align-self-center">
<img src="https://api.buzzanglemusic.com/images/artists/1374" class="img-responsive rounded-circle col-7 col-md-4 col-sm-5 col-xs-12" alt="placeholder image" />
</div>
<div class="col-md-12 d-flex justify-content-end align-self-center text-right card-text">
1. Drake
</div>
</div>
</div>
CSS:
.wrap-rounded {
width: 100%;
height: 115px;
border: 2px solid #7FFFD4;
border-radius: 40px;
-webkit-box-shadow: 12px 10px 10px 0px rgba(127, 255, 212, 1);
-moz-box-shadow: 12px 20px 01px 0px rgba(127, 255, 212, 1);
box-shadow: 12px 10px 20px 0px rgba(127, 255, 212, 1);
}
.card-text {
padding-right: 10%;
font-size: 2em;
font-weight: bold;
font-style: italic;
}
Codepen Example here.
Snippet:
.wrap-rounded {
width: 100%;
height: 115px;
border: 2px solid #7FFFD4;
border-radius: 40px;
-webkit-box-shadow: 12px 10px 10px 0px rgba(127, 255, 212, 1);
-moz-box-shadow: 12px 20px 01px 0px rgba(127, 255, 212, 1);
box-shadow: 12px 10px 20px 0px rgba(127, 255, 212, 1);
}
.card-text {
padding-right: 10%;
font-size: 2em;
font-weight: bold;
font-style: italic;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap-rounded d-flex">
<div class="d-flex flex-row align-self-center justify-content-start">
<div class="col-6 d-flex align-self-center">
<img src="https://api.buzzanglemusic.com/images/artists/1374" class="img-responsive rounded-circle col-7 col-md-4 col-sm-5 col-xs-12" alt="placeholder image" />
</div>
<div class="col-md-12 d-flex justify-content-end align-self-center text-right card-text">
1. Drake
</div>
</div>
</div>
I'm designing a nav panel and I need to adjust the different option's styles to the parent div. For example, I need to adjust the background color of the options to the parent div (Paint the color in the full height of the parent div).
This is the code:
<div class="text-center text-muted"> <div class="container">
<div class="card">
<div class="card-header" style="background-color: #e9ecef;">
<div class="row mt8" id="nav_panel">
<div class="col-md-2" id="nav_panel_monday" style="background-color: rgb(0, 160, 157);">
<a id="nav_href_monday" href="#" style="color: white;">Monday</a>
</div>
<div class="col-md-2" id="nav_panel_tuesday">
<a id="nav_href_tuesday" href="#">Tuesday</a>
</div>
<div class="col-md-2" id="nav_panel_wednesday">
<a id="nav_href_wednesday" href="#">Wednesday</a>
</div>
<div class="col-md-2" id="nav_panel_thursday">
<a id="nav_href_thursday" href="#">Thursday</a>
</div>
<div class="col-md-2" id="nav_panel_friday">
<a id="nav_href_friday" href="#">Friday</a>
</div>
</div>
</div>
<div class="card-body">
<div id="div_hidden_monday"></div>
<div id="div_hidden_tuesday" style="display: none;"></div>
<div id="div_hidden_wednesday" style="display: none;"></div>
<div id="div_hidden_thursday" style="display: none;"></div>
<div id="div_hidden_friday" style="display: none;"></div>
</div>
</div>
</div>
</div>
.container {
width: 100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
.card {
position: relative;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #FFFFFF;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
#nav_panel {
background-color: #e9ecef;
padding-right: 0;
padding-left: 0;
border-radius: 5px;
}
.col-md-2 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
Any suggestion? Thanks for reading!
I think, you need to remove padding of the .card-header and add padding to the child elements. Like this
https://jsfiddle.net/bhusalhari99/sruLkt2b/3/
hope it will works for you.
For the time being using padding and margin issue is fixed but You
need to re-right the nav HTML structure using nav and ul li
like here
.container {
width: 100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
.card {
position: relative;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #FFFFFF;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-header {
padding: 0 15px !important;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.card-header a {
display: block;
padding: 10px 0;
}
#nav_panel {
background-color: #e9ecef;
padding-right: 0;
padding-left: 0;
border-radius: 5px;
}
.col-md-2 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="text-center text-muted">
<div class="container">
<div class="card">
<div class="card-header" style="background-color: #e9ecef;">
<div class="row mt8" id="nav_panel">
<div class="col-md-2" id="nav_panel_monday" style="background-color: rgb(0, 160, 157);">
<a id="nav_href_monday" href="#" style="color: white;">Monday</a>
</div>
<div class="col-md-2" id="nav_panel_tuesday">
<a id="nav_href_tuesday" href="#">Tuesday</a>
</div>
<div class="col-md-2" id="nav_panel_wednesday">
<a id="nav_href_wednesday" href="#">Wednesday</a>
</div>
<div class="col-md-2" id="nav_panel_thursday">
<a id="nav_href_thursday" href="#">Thursday</a>
</div>
<div class="col-md-2" id="nav_panel_friday">
<a id="nav_href_friday" href="#">Friday</a>
</div>
</div>
</div>
<div class="card-body">
<div id="div_hidden_monday"></div>
<div id="div_hidden_tuesday" style="display: none;"></div>
<div id="div_hidden_wednesday" style="display: none;"></div>
<div id="div_hidden_thursday" style="display: none;"></div>
<div id="div_hidden_friday" style="display: none;"></div>
</div>
</div>
</div>
</div>