I'am trying to simply target the third div in my html with a class of .counter-wrap. On a mobile device this div has a margin-bottom of 40px. I want to remove the margin-bottom on the third stacked div named .counter-wrap.
I thought I could simply do .counter-wrap: last-of-type but the reason this doesn't work I believe is because each .counter-wrap is in its own .col class. Can this be done with a pseudo element or would I be better off just using a unique id on the last .counter-wrap div and just apply margin-bottom: 0?
body {
color: black;
font-size: 15px;
}
.wrap {
width: 600px;
margin: 0 auto;
}
.container,
.container-long {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
.row {
margin-left: -15px;
margin-right: -15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
position: relative;
padding-right: 15px;
padding-left: 15px;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.counter-wrap {
margin-bottom: 40px;
}
.counter-text,
.counter-number {
display: block;
text-align: center;
text-transform: uppercase;
color: black;
}
.counter-text {
letter-spacing: normal;
font-weight: 400;
}
.counter-number {
font-size: 60px;
font-weight: 500;
}
<div class="wrap">
<div class="container">
<div class="row">
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
</div>
</div>
</div>
Use last-of-type selector on the col class like this:
.col:last-of-type .counter-wrap {
margin-bottom: 0;
}
See demo below:
body {
color: black;
font-size: 15px;
}
.wrap {
width: 600px;
margin: 0 auto;
}
.container,
.container-long {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
.row {
margin-left: -15px;
margin-right: -15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
position: relative;
padding-right: 15px;
padding-left: 15px;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.counter-wrap {
margin-bottom: 40px;
}
/*ADDED*/
.col:last-of-type .counter-wrap {
margin-bottom: 0;
}
.counter-text,
.counter-number {
display: block;
text-align: center;
text-transform: uppercase;
color: black;
}
.counter-text {
letter-spacing: normal;
font-weight: 400;
}
.counter-number {
font-size: 60px;
font-weight: 500;
}
<div class="wrap">
<div class="container">
<div class="row">
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
</div>
</div>
</div>
Please check the updated code. You only need to update this css rest you will get the desired result.
.wrap .col:last-child .counter-wrap {
margin-bottom: 0;
}
body {
color: black;
font-size: 15px;
}
.wrap {
width: 600px;
margin: 0 auto;
}
.container,
.container-long {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
.row {
margin-left: -15px;
margin-right: -15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
position: relative;
padding-right: 15px;
padding-left: 15px;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.counter-wrap {
margin-bottom: 40px;
}
.counter-text,
.counter-number {
display: block;
text-align: center;
text-transform: uppercase;
color: black;
}
.counter-text {
letter-spacing: normal;
font-weight: 400;
}
.counter-number {
font-size: 60px;
font-weight: 500;
}
.wrap .col:last-child .counter-wrap {
margin-bottom: 0;
}
<div class="wrap">
<div class="container">
<div class="row">
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
</div>
</div>
</div>
You can use the nth-child() rule. Apply it to the parent element and then input the number of which child class you wish to target. In this case it would be
.col:nth-child(3) .counter-wrap {
background:red;
}
body {
color: black;
font-size: 15px;
}
.wrap {
width: 600px;
margin: 0 auto;
}
.container,
.container-long {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
.row {
margin-left: -15px;
margin-right: -15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
position: relative;
padding-right: 15px;
padding-left: 15px;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.counter-wrap {
margin-bottom: 40px;
}
.counter-text,
.counter-number {
display: block;
text-align: center;
text-transform: uppercase;
color: black;
}
.counter-text {
letter-spacing: normal;
font-weight: 400;
}
.counter-number {
font-size: 60px;
font-weight: 500;
}
.col:nth-child(3) .counter-wrap {
background:red;
}
<div class="wrap">
<div class="container">
<div class="row">
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
<div class="col">
<div class="counter-wrap">
<span class="counter-text">Line1</span>
<span class="counter-number count">1234</span>
<span class="counter-text">Line 2</span>
</div>
</div>
</div>
</div>
</div>
Related
I am currently working on a Forum website, and can't figure out how to place elements that won't be influenced by other elements' content.
For example, if I change the element content text, the other elements that are next to it will change position.
Example:
HTML and CSS from the first image:
.staff-show {
float: right;
margin-right: 10em;
margin-top: 10em;
}
.staff-show .title-staff {
font-family: Poppins-SemiBold, FontAwesome;
display: flex;
align-items: center;
justify-content: center;
}
.staff-show .title-staff i {
margin-right: 1em;
}
.staff-show .title-staff h2 {
right: 5%;
}
.staff-show .staff-list h3,
p {
margin: 0.1em;
padding: 0.1em;
}
.staff-show .staff-list .icon-border {
border: 2px solid #212e38;
border-radius: 10px;
width: 4em;
height: 4em;
display: inline-block;
}
.staff-show .staff-list i {
padding: 1.3em 0.9em;
text-align: center;
}
.staff-show .staff-list ul li {
margin: 1.2em;
}
.staff-show .staff-list .staff-info {
float: right;
margin-left: 1.5em;
}
<div class="staff-show">
<div class="staff-list">
<ul>
<li>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>Johnny Games</h3>
<p>System Admin</p>
</div>
</li>
<li>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>John Lenon</h3>
<p>Service Founder</p>
</div>
</li>
</ul>
</div>
</div>
Second image HTML and CSS:
.forum-list button {
border: 2px solid #212e38;
border-radius: 20px;
padding: 10px 40px;
width: 77em;
height: 8.5em;
font-family: Poppins-SemiBold, FontAwesome;
color: white;
margin-right: 1em;
margin-bottom: 1.5em;
display: grid;
}
.forum-list-border {
border: 2px solid #172129;
border-radius: 20px;
width: 5.7em;
height: 5.7em;
margin-top: 0.3em;
}
.forum-list i {
margin-top: 1.5em;
width: 100%;
}
.forum-list-header {
display: flex;
align-items: center;
}
.forum-list h2 {
margin-left: 2em;
}
.forum-list .forum-list.btn {
margin-bottom: 2em;
}
.forum-list-info {
grid-column-start: 2;
grid-column-end: 3;
}
.forum-list-info-numbers {
display: flex;
align-items: center;
}
.forum-list-info-text {
display: flex;
align-items: center;
}
.forum-list-info-numbers h3 {
margin-right: 6.3em;
}
.forum-list-info-text p {
margin-right: 5em;
}
<div class="forum-container">
<div class="forum-list-container">
<div class="forum-list">
<button class="forum-list-btn">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers"><h3>5.1k</h3><h3>50.3k</h3></div>
<div class="forum-list-info-text"><p>Posts</p><p>Messages</p></div>
</div>
</button>
</div>
</div>
</div>
Sorry for this long code, I just want to make this as explicit as possible, so it's easier to solve.
You can use the display: flex property to achieve both results. I have added another wrapper div for the first image and added a new class on button for the second one.
.staff-show {
float: right;
margin-right: 10em;
margin-top: 10em;
}
.staff-show .title-staff {
font-family: Poppins-SemiBold, FontAwesome;
display: flex;
align-items: center;
justify-content: center;
}
.staff-show .title-staff i {
margin-right: 1em;
}
.staff-show .title-staff h2 {
right: 5%;
}
.staff-show .staff-list h3,
p {
margin: 0.1em;
padding: 0.1em;
}
.staff-show .staff-list .icon-border {
border: 2px solid #212e38;
border-radius: 10px;
width: 4em;
height: 4em;
display: inline-block;
}
.staff-show .staff-list i {
padding: 1.3em 0.9em;
text-align: center;
}
.staff-show .staff-list ul li {
margin: 1.2em;
}
.staff-show .staff-list .staff-info {
float: right;
margin-left: 1.5em;
}
.another-div {
display: flex;
}
<div class="staff-show">
<div class="staff-list">
<ul>
<li>
<div class='another-div'>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>Johnny Games</h3>
<p>System Admin</p>
</div>
</div>
</li>
<li>
<div class='another-div'>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>John Lenon</h3>
<p>Service Founder</p>
</div>
</div>
</li>
</ul>
</div>
</div>
.forum-list button {
border: 2px solid #212e38;
border-radius: 20px;
padding: 10px 40px;
width: 77em;
height: 8.5em;
font-family: Poppins-SemiBold, FontAwesome;
color: white;
margin-right: 1em;
margin-bottom: 1.5em;
display: grid;
}
.forum-list-border {
border: 2px solid #172129;
border-radius: 20px;
width: 5.7em;
height: 5.7em;
margin-top: 0.3em;
}
.forum-list i {
margin-top: 1.5em;
width: 100%;
}
.forum-list-header {
display: flex;
align-items: center;
}
.forum-list h2 {
margin-left: 2em;
}
.forum-list .forum-list.btn {
margin-bottom: 2em;
}
.forum-list-info {
grid-column-start: 2;
grid-column-end: 3;
}
.forum-list-info-numbers {
display: flex;
align-items: center;
}
.forum-list-info-text {
display: flex;
align-items: center;
}
.forum-list-info-numbers h3 {
margin-right: 6.3em;
}
.forum-list-info-text p {
margin-right: 5em;
}
.d-flex-between {
display: flex !important;
justify-content: space-between;
}
<div class="forum-container">
<div class="forum-list-container">
<div class="forum-list">
<button class="forum-list-btn d-flex-between">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers">
<h3>5.1k</h3>
<h3>50.3k</h3>
</div>
<div class="forum-list-info-text">
<p>Posts</p>
<p>Messages</p>
</div>
</div>
</button>
<button class="forum-list-btn d-flex-between">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Account Boost</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers">
<h3>5.1k</h3>
<h3>50.3k</h3>
</div>
<div class="forum-list-info-text">
<p>Posts</p>
<p>Messages</p>
</div>
</div>
</button>
</div>
</div>
</div>
Your first example does this because the .staff-show .staff-list .staff-info rule is set to float: right. So, when the content in div.staff-info gets smaller, the right side of the div will remain flush with the right side of its container.
Assuming you won't have enough content to force it to wrap, you could simply do the following to keep it left-aligned with the bordered box:
.staff-show .staff-list .staff-info {
display: inline-block;
vertical-align: top;
margin-left: 1.5em;
}
However, I would suggest using a grid layout or a similar technique so that it's less likely to break if your content size or container size changes.
In your second example, just add justify-content: space-between to the .forum-list button rule.
You need to differentiate the class names for example in the first image you have both classes named as staff-info, meaning if you style the staff-info class both divs will change simultaneously.
hello I want to have a "how" when I go over the picture but the heart is positioned elsewhere. where is the mistake?
and the point I don't understand is why does my card width seem to be overflowing?
Because of the overflow I showed in the picture. When I add a card to the 2nd card. The cards are coming upside down.
.card-video {
width: 305px;
display: flex;
flex-direction: column;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.clip-icon {
position: relative;
}
.clip-icon:hover {
background-color: red;
}
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
.card-video is having flow direction column.
If you try to put the more card like this it will always show in upside down like a stack. Wrap the entire thing in div and provide the flow-direction: row and flex-wrap : wrap to get desired result.
<style>
.box{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.card-video {
width: 305px;
display: flex;
flex-direction: column;
margin:0.5rem;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.clip-icon {
position: relative;
}
.clip-icon:hover {
background-color: red;
}
</style>
<div class="box">
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
</box>
The flex-direction needs to be set to row, with flex-wrap:wrap as to format correctly.
The .clip-icon can be set to position:absolute if the parent element has position:relative applied.
You can set the clip-icon to display:none and get it to display on picture hover by adding .card-pic:hover .clip-icon: { display:block; }
I have added a snippet below
.box{
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.card-video {
width: 305px;
display: flex;
flex-direction: column;
margin:0.5rem;
}
.card-pic img {
object-fit: cover;
width: 100%;
height: 100%;
max-width: 305px;
max-height: 170px;
}
.card-info-logo {
position: absolute;
right: 5px;
top: -28px;
}
.card-info-logo img {
width: 55px;
border-radius: 50%;
border: 4px solid #5e4b55;
}
.card-info {
position: relative;
background-color: #292828;
height: 90px;
padding: 7px 10px 10px 10px;
display: flex;
flex-direction: column;
}
.card-info-top {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-info .card-info-category {
color: #546e7a;
font-size: 14px;
}
.card-info .card-info-title {
color: #546e7a;
font-size: 14px;
padding-bottom: 5px;
}
.card-info-bottom {
border-top: solid 1px #44393e;
padding-top: 7px;
display: flex;
align-items: center;
line-height: 1;
justify-content: space-between;
}
.card-info .card-info-bottom .views {
color: #546e7a;
font-size: 12px;
}
.card-info .card-info-bottom .date {
color: #546e7a;
font-size: 12px;
}
.card-pic:hover .clip-icon{
display:block;
}
.card-pic {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
position:relative;
}
.clip-icon a {
position: relative
}
.clip-icon {
position: absolute;
bottom:10px;
left:5px;
width:20px;
height:20px;
background-color:white;
display:none;
}
.clip-icon:hover {
background-color: red;
}
<div class="box">
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
<div class="card-video">
<div class="card-pic">
<a href="">
<img src="https://i.ytimg.com/vi/VeDmG7YovSM/maxresdefault.jpg" alt="">
<div class="clip-icon">
<span class="fa fa-heart"></span>
</div>
</a>
</div>
<div class="card-info mt-1">
<div class="card-info-logo">
<img src="https://yt3.ggpht.com/a/AATXAJxBc7gQx7gKOeJG0uTgpfZVUA1FT_EOxjVjYtI-=s100-c-k-c0xffffffff-no-rj-mo" alt="">
</div>
<div class="card-info-top">
<div class="card-info-category">Video Category</div>
<div class="card-info-title">Video Title</div>
</div>
<div class="card-info-bottom">
<div class="views">312K</div>
<div class="date">16 hour ago</div>
</div>
</div>
</div>
</box>
My site looks like this:
DESKTOP:
MOBILE:
However, I need the text to be inline with the middle of the corresponding image (both items centered, so that the subtext isn't off-centered).
My HTML:
<div class="col-lg-3>
<div class="container--wrap">
<div class="inward-text">
<br>
<img src="green-up.png" class="center" style="vertical-align: middle;">
<br>
<span style="color: #9BDDB4; font-family: robotobold; font-size: 30px; vertical-align: middle;" "="">4.51%</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
<img src="red-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<br>
<br>
<br>
<br>
<div id="txtdown">
<span style="color: #EE939C; font-family: robotobold; font-size: 30px; vertical-align: middle;">1.80%</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
<img src="flag-ic.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<br>
<br>
<br>
<div id="txtdown">
<span style="color: #AEAEAE; font-family: robotobold; font-size: 30px; vertical-align: middle;">text</span>
<br>
<span style="color: #ffffff; font-family: robotolight; font-weight: lighter; font-size: 15px">subtext</span>
</div>
</div>
</div>
</div>
Relevant CSS:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 135px;
}
.inward-text span{
display: inline;
margin-left: 10px;
}
.inward-text img{
margin-left: 80px;
float: left;
}
#txtdown{
margin-top: 10px;
}
How do I do what I want to be doing?
EDIT:
I apologise in advance for the extremely messy <br>s that there are!
br tags it is not the best approach, I try to simplify your solution, block with your image and text should be like there:
<div class="items">
<div class="item red">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
<div class="item green">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
<div class="item grey">
<img/>
<div class="item__text">
<span class="percent"></span>
<span class="description"></span>
</div>
</div>
</div>
CSS
.items {
display: flex;
flex-direction: column;
}
.item {
display: flex;
align-items: center;
}
.item__text {
display: flex;
flex-direction: column;
}
And don't use be, use margin or padding, it is a more flexible and reliable approach.
Html:
<div class="container--wrap">
<div class="inward-text">
<div class="flex">
<img src="green-up.png" class="center" style="vertical-align: middle;">
<div id="txtdown">
<span style="color: #9BDDB4; font-size: 30px; vertical-align: middle;">4.51%</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
</div>
<div class="flex">
<img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<div id="txtdown">
<span style="color: #EE939C; font-size: 30px; vertical-align: middle;">1.80%</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">from yesterday</span>
</div>
</div>
<div class="flex">
<img src="green-up.png" class="center" style="padding-top: 30px; vertical-align: middle;">
<div id="txtdown">
<span style="color: #AEAEAE; font-size: 30px; vertical-align: middle;">text</span>
<span style="color: #ffffff; font-weight: lighter; font-size: 15px">subtext</span>
</div>
</div>
</div>
</div>
Css:
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}
.flex {
display: flex;
}
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.inward-text span {
display: inline;
margin-left: 10px;
}
#txtdown {
margin-top: 10px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
Step 1
Remove all inline styles from each element and place them in CSS, as classes, along these lines:
.percent {
color: #EE939C;
font-family: robotobold;
font-size: 30px;
vertical-align: middle;
}
.detail {
color: #ffffff;
font-family: robotolight;
font-weight: lighter;
font-size: 15px;
}
Step 2
Remove all <br/>s
Step 3
Wrap each of the items as the following markup
<div class="fancy-item"> <!-- your group -->
<img ...>
<div> <!-- flexbox sub-group -->
<span class="percent">1.80%</span>
<span class="detail">from yesterday</span>
</div>
</div>
Add the rest of your CSS:
.fancy-item {
display: flex;
align-items: center;
}
Step 4
Add some bottom margin to .percent or top margin to .detail if you want to set them slightly apart.
You're done!
Note: You don't have to use my class names, use whatever makes sense in your context.
Another note: Steps 1-3 are the most important. They allow you to change all the items at once, if you don't like a particular detail, without having to go through each of them and do the modification. DRY is one of the most important principles in programming.
This question already has answers here:
CSS Float: Floating an image to the left of the text
(7 answers)
Align image to left of text on same line - Twitter Bootstrap3
(6 answers)
Wrap text around an image on bootstrap 3
(6 answers)
Closed 3 years ago.
I'm designing people cards and I need to positionate the image on the left side and the text on the right side but I'm having issues doing it.
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.media {
margin: 20px 0;
padding: 10px;
vertical-align: middle;
display: inline-block;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
<div class="row">
<div class="col-lg-3">
<div class="media">
<div id="left_div">
<img src="/web/image/hr.employee/7/image">
</div>
<div id="right_div">
<span class="label label-default">Marc Demo
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> HIPOACUSICOS
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">mark.brown23#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
</div>
I'm trying to use position, width and another properties on "left_div" and "right_div" but I'm not able to format it.
Any suggestion?
Edit: Using display: flex and align-items: center this is the result of it:
Maybe the problem are the inherited styles of other parent divs?
Thanks for reading!
Use display: flex on .media, then use display: block on span elements
You could also avoid to use a presentational tag (<hr>) and use a border-bottom.
Note that if the horizontal space is not enough due to a narrow container you need to wrap the content as in my second example.
.media {
display: flex;
flex-flow: row wrap;
align-items: center; /* optional */
margin: 20px 0;
padding: 10px;
width: 100%;
background: #e8e8e8; }
.media > div {
padding: 10px; }
.media img {
vertical-align: middle;
max-width: 100%;
width: 200px; }
#left_div {
text-align: center;
flex: 1 0 25%; }
#right_div {
flex: 3 0 60%; }
.media span {
display: block;
padding: 5px 0;
word-break: break-all;
word-break: break-word;
border-bottom: 1px #ccc solid; }
<div class="media">
<div id="left_div">
<img src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
<div id="right_div">
<span class="label label-default">Marc Demo</span>
<span class="label label-default"> HIPOACUSICOS </span>
<span class="label label-default">mark.brown23#example.com </span>
</div>
</div>
<!-- example with narrow parent -->
<div style="width: 200px;">
<div class="media">
<div id="left_div">
<img src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
<div id="right_div">
<span class="label label-default">Marc Demo</span>
<span class="label label-default"> HIPOACUSICOS </span>
<span class="label label-default">mark.brown23#example.com </span>
</div>
</div>
</div>
Easiest way to do this is to use flexbox.
Make the parent, .media, a flex container, and align-items: center replacing vertical-align: middle
EDIT
I've edited my answer to show 2 "profile cards" side by side. In doing so, I've changed left_div and right_div into classes instead of id, and gave left_div a 40% width.
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
display: flex;
}
.media {
margin: 20px 0;
padding: 10px;
display: flex;
align-items: center;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
background-color: #ddd;
margin-right: 15px;
}
.left_div {
width: 40%;
margin-right: 15px;
}
.right_div {
width: 60%;
}
img {
width: 100%;
height: auto;
}
<div class="row">
<div class="col-lg-3">
<div class="media">
<div class="left_div">
<img src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
<div class="right_div">
<span class="label label-default">Marc Demo
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> HIPOACUSICOS
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">mark.brown23#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
<div class="media">
<div class="left_div">
<img src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>
<div class="right_div">
<span class="label label-default">Some one
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> Barbar
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">fubar#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
</div>
</div>
You could use flexbox for doing this stuff. Also, I would recommend using classes instead if id's because of css specificity
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.media {
margin: 20px 0;
padding: 10px;
display: flex;
}
.media > div{
display: flex;
justify-content: center;
flex-direction: column;
}
.media .right_div{
padding: 10px;
}
<div class="row">
<div class="col-lg-3">
<div class="media">
<div class="left_div">
<img src="https://placehold.it/200x200">
</div>
<div class="right_div">
<span class="label label-default">Marc Demo
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> HIPOACUSICOS
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">mark.brown23#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
</div>
You could try a few things here - difficult to get the exact styles right without the design, but you could simply add "display: flex;" to the .media rules.
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.media {
margin: 20px 0;
padding: 10px;
vertical-align: middle;
display: inline-block;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
display: flex;
flex-flow: row nowrap;
}
/* You can customise the flex items here to adjust the spacing/styles etc. */
.media .left_div {
flex: 1;
}
.media .right_div {
flex: 1;
}
<div class="row">
<div class="col-lg-3">
<div class="media">
<div class="left_div">
<img src="/web/image/hr.employee/7/image">
</div>
<div class="right_div">
<span class="label label-default">Marc Demo
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default"> HIPOACUSICOS
<hr style="margin: 0em; border-width: 2px;">
</span>
<span class="label label-default">mark.brown23#example.com
<hr style="margin: 0em; border-width: 2px; display: none;">
</span>
</div>
</div>
</div>
I've also changed your HTML to use classes instead of IDs for left_div and right_div, as really an ID should not be used more than once on a page.
You can use display: flex to .media like this:
.media {
display: flex;
align-items: center;
margin: 20px 0;
padding: 10px;
vertical-align: middle;
display: inline-block;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
Also as I can see data getting out of container. You can use overflow-x: auto; or changing col-lg-3 to some larger classes
Add flex to media class as below
.media {
display: flex;
}
.hot-deals-row{
margin-top: 30px;
background: #eaeaea;
}
.hot-deals-box{
border: 1px solid #eaeaea;
}
.hot-deals-box .hot-deals-tab {
display: table;
width: 100%;
}
.hot-deals-box .hot-deals-tab .hot-deals-title{
width: 45px;
display: table-cell;
text-transform: uppercase;
font-size: 24px;
text-align: center;
background: #0088cc;
color: #fff;
padding-top: 2px;
}
.hot-deals-box .hot-deals-tab .hot-deals-title>span{
width: 100%;
float: left;
text-align: center;
}
.hot-deals-box .hot-deals-tab .hot-deals-title>span.yellow{
color: #ffcc00;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box{
display: table-cell;
padding:25px;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box .nav-tab li{
line-height: 40px;
border-bottom: 1px solid #eaeaea;
text-transform: uppercase;
padding-left: 15px;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box .nav-tab li.active>a{
color: #0099cc;
}
.hot-deals-box .hot-deals-tab .box-count-down{
margin-top: 20px;
float: left;
padding-left: 4px;
}
.hot-deals-box .hot-deals-tab .box-count-down .box-count{
width: 67px;
height:67px;
border:1px solid #eaeaea;
float: left;
border-radius: 90%;
text-align: center;
padding: 10px;
position: relative;
color: #fff;
margin-left: -4px;
background: #fff;
}
.hot-deals-box .hot-deals-tab .box-count-down .dot{
display: none;
}
.hot-deals-box .hot-deals-tab .box-count-down .box-count:before{
width: 100%;
height: 100%;
background: #0088cc;
float: left;
content: '';
border-radius: 90%;
}
.hot-deals-box .hot-deals-tab .box-count-down .box-count:after{
content: '';
width: 23px;
height: 1px;
background: #fff;
position: absolute;
top: 34px;
left: 20px;
}
.hot-deals-box .hot-deals-tab .box-count-down .number{
position: absolute;
width: 100%;
left: 0;
top: 15px;
}
.hot-deals-box .hot-deals-tab .box-count-down .text{
position: absolute;
width: 100%;
left: 0;
bottom: 16px;
font-size: 10px;
}
.hot-deals-box .hot-deals-tab-content-col{
padding-left: 0;
}
.hot-deals-box .hot-deals-tab-content{
padding: 30px 30px 0 0;
}
.hot-deals-box .product-list .left-block{
border: 1px solid #eaeaea;
padding: 0;
}
.hot-deals-box .product-list .right-block {
text-align:center;
font-family: "Comic Sans MS", cursive;
font-size: large;
}
<div class="hot-deals-row">
<div class="container">
<div class="hot-deals-box">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-1">
<div class="hot-deals-tab">
<div class="hot-deals-title vertical-text">
<span>D</span>
<span>E</span>
<span>A</span>
<span>L</span>
<span class="yellow">O</span>
<span class="yellow">F</span>
<span>T</span>
<span>H</span>
<span>E</span>
<span class="yellow">d</span>
<span class="yellow">a</span>
<span class="yellow">y</span>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 hot-deals-tab-content-col">
<div class="hot-deals-tab-content tab-container">
<div id="hot-deal-1" class="tab-panel active">
<ul class="product-list owl-carousel nav-center" data-dots="false" data-loop="true" data-nav = "true" data-margin = "29" data-autoplayTimeout="1000" data-autoplayHoverPause = "true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":4}}'>
<li>
<div class="left-block">
<img class="img-responsive" alt="product" src="assets/data/option4/p8.jpg" />
</div>
<div class="price-percent-reduction2">
20% OFF
</div>
<div class="right-block">
<h5 class="product-name">Android Smartphone </h5>
<div class="content_price">
<span class="price product-price">$48,95</span>
<span class="price old-price">$62,00</span>
</div>
</div>
</li>
<li>
<div class="left-block">
<img class="img-responsive" alt="product" src="assets/data/option4/p12.jpg" />
</div>
<div class="price-percent-reduction2">
30% OFF
</div>
<div class="right-block">
<h5 class="product-name">Micromax X1800</h5>
<div class="content_price">
<span class="price product-price">$68,95</span>
<span class="price old-price">$82,00</span>
</div>
</div>
</li>
<li>
<div class="left-block">
<img class="img-responsive" alt="product" src="assets/data/option4/p11.jpg" />
</div>
<div class="price-percent-reduction2">
40% OFF
</div>
<div class="right-block">
<h5 class="product-name">Desire 620G 5-Inch Dual SIM Android </h5>
<div class="content_price">
<span class="price product-price">$58,95</span>
<span class="price old-price">$72,00</span>
</div>
</div>
</li>
<li>
<div class="left-block">
<img class="img-responsive" alt="product" src="assets/data/option4/p12.jpg" />
</div>
<div class="price-percent-reduction2">
10% OFF
</div>
<div class="right-block">
<h5 class="product-name">Canvas Juice 2 AQ5001 </h5>
<div class="content_price">
<span class="price product-price">$84,95</span>
<span class="price old-price">$95,00</span>
</div>
</div>
</li>
</ul>
</div>
image1
my desktop view is like shown in the image1.
image2
when i resize my screen the output i get is shown in the image2.
Now i want to convert these image2 into the horizontal view when my screen size is 767px.
You need a media query something like this:
#media screen and (max-width: 767px) {
.hot-deals-box .hot-deals-tab .hot-deals-title > span {
width: auto;
display: inline-block;
}
}
JSfiddle Demo
.hot-deals-row {
margin-top: 30px;
background: #eaeaea;
}
.hot-deals-box {
border: 1px solid #eaeaea;
}
.hot-deals-box .hot-deals-tab {
display: table;
width: 100%;
}
.hot-deals-box .hot-deals-tab .hot-deals-title {
//width: 45px;
display: table-cell;
text-transform: uppercase;
font-size: 24px;
text-align: center;
background: #0088cc;
color: #fff;
padding-top: 2px;
}
.hot-deals-box .hot-deals-tab .hot-deals-title > span {
width: 100%;
float: left;
text-align: center;
}
.hot-deals-box .hot-deals-tab .hot-deals-title>span.yellow {
color: #ffcc00;
}
.hot-deals-box .hot-deals-tab .hot-deals-tab-box {
display: table-cell;
padding: 25px;
}
#media screen and (max-width: 767px) {
.hot-deals-box .hot-deals-tab .hot-deals-title > span {
width: auto;
display: inline-block;
}
}
<div class="hot-deals-row">
<div class="container">
<div class="hot-deals-box">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-1">
<div class="hot-deals-tab">
<div class="hot-deals-title vertical-text"> <span>D</span>
<span>E</span>
<span>A</span>
<span>L</span>
<span class="yellow">O</span>
<span class="yellow">F</span>
<span>T</span>
<span>H</span>
<span>E</span>
<span class="yellow">d</span>
<span class="yellow">a</span>
<span class="yellow">y</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>