I have two rows with three columns each. Now I want the second row to be a little bit more distant to the first.
I thought I could do this with giving the rows a wrapper and giving it's last child (which should be the second row right) a padding-top. Unfortunately, this does nothing.
HTML / CSS
.row {
max-width: 1140px;
margin: 0 auto;
}
.box {
padding: 1%;
}
.services-container {
margin-top: 60px;
}
<div class="services-container">
<div class="row">
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
</div>
</div>
Add following css :nth-child(2). I whould suggest use parent class that because you will have many row in your site so better to use particular parent class.
.services-container .row:nth-child(2){padding-top:20px;}
.row {
max-width: 1140px;
margin: 0 auto;
}
.box {
padding: 1%;
}
.services-container {
margin-top: 60px;
}
.services-container .row:nth-child(2){padding-top:20px;}
<div class="services-container">
<div class="row">
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
</div>
</div>
Add .row:nth-child(2){
padding-top: 100px;}
.row {
max-width: 1140px;
margin: 0 auto;
}
.box {
padding: 1%;
}
.services-container {
margin-top: 60px;
}
.row:nth-child(2){
padding-top: 100px;
}
<!DOCTYPE html>
<html>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<head>
<body>
<div class="services-container">
<div class="row">
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
</div>
<div class="row">
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
<div class="col span-1-of-3 box">
<h5>Lorem</h5>
<p>
Ipsum
</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Related
I want to create flex style UI that looks like this
what I can do so far is split the UI using col-5 col-2 col-5 from bootstrap, and use flex to create the col-5 UI section (left and right), here's my code
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-5">
<div class="d-flex align-items-start">
<div class="avatar me-75">
<i data-feather="upload" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
<div class="col-2">
<div class="d-flex" style="height: 50px;">
<div class="vr"></div>
</div>
</div>
<div class="col-5">
<div class="d-flex align-items-start">
<div class="avatar me-75">
<i data-feather="user-plus" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the result
the results don't match my expectations, is there a class from bootstrap that I haven't added? or is there another way I can get the result like the mockup I want?
I recommend to remove the col-width given to the vertical border and instead add it separately from the css. Also, use the justify-content-center class of Bootstrap in the div with the d-flex class. I hope this is what you are trying to achieve.
.col-6::after {
content: "";
position: absolute;
border-right: 2px dotted #000;
height: 75px;
top: 10px;
left: 50%;
display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="d-flex justify-content-center">
<div class="avatar me-75">
<i data-feather="upload" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex justify-content-center">
<div class="avatar me-75">
<i data-feather="user-plus" class=avatar-icon></i>
</div>
<div>
<p class="mb-0">Lorem ipsum</p>
<p>lorem ipsum dolor sit amet lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I also created a separate code if you choose to achieve this without using Bootsrap or Flex and instead use the CSS Grid Layout. :)
.card-section {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card-section .card {
display: grid;
grid-template-columns: 100px 1fr;
justify-self: center;
align-items: center;
}
.card-section .card:first-child::after {
content: "";
position: absolute;
border-right: 2px dotted #000;
height: 100px;
top: 10px;
left: 50%;
display: block;
}
.card-section .card .icon-holder {
background: #000;
width: 75px;
height: 75px;
border-radius: 15px;
}
<div class="card-section">
<div class="card">
<div class="icon-holder">
<i class="icon"></i>
</div>
<div class="info">
<h2>
Title
</h2>
<p>
Description
</p>
</div>
</div>
<div class="card">
<div class="icon-holder">
<i class="icon"></i>
</div>
<div class="info">
<h2>
Title
</h2>
<p>
Description
</p>
</div>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I'm not sure if my issue is the nested row, but I can't get the inner row vertical aligned centered within it's alert-box. Anyone any hint what I'm doing wrong?
https://jsfiddle.net/d2pg4xta/
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row"> <!-- here is my nested row -->
<div class="col-md-6"><p class="mb-0">1:</p></div>
<div class="col-md-6"><p class="mb-0">A</p></div>
<div class="col-md-6"><p class="mb-0">2:</p></div>
<div class="col-md-6"><p class="mb-0">B</p></div>
<div class="col-md-6"><p class="mb-0">3:</p></div>
<div class="col-md-6"><p class="mb-0">C</p></div>
<div class="col-md-6"><p class="mb-0">4:</p></div>
<div class="col-md-6"><p class="mb-0">D</p></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
Update: It's not about aligning the 2 alert-boxes, it's about the inside of my left alert-box. I expect the inside row containing the content (abcd1234) to be more centered withing it's own alert-box like this: https://ibb.co/myntK5j
Do this:
.alert-dark {
display: flex; /*add*/
flex-direction: column; /*add*/
align-items: center; /*add*/
color: #1b1e21;
background-color: #d6d8d9;
border-color: #c6c8ca;
}
You need to use flex on .alert-box and remove margin from .row
Js fiddle: https://jsfiddle.net/zbywdacp/
Live Demo:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.alert-dark {
display: flex;
align-items: center;
justify-content: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row m-0">
<div class="col-md-6">
<p class="mb-0">1:</p>
</div>
<div class="col-md-6">
<p class="mb-0">A</p>
</div>
<div class="col-md-6">
<p class="mb-0">2:</p>
</div>
<div class="col-md-6">
<p class="mb-0">B</p>
</div>
<div class="col-md-6">
<p class="mb-0">3:</p>
</div>
<div class="col-md-6">
<p class="mb-0">C</p>
</div>
<div class="col-md-6">
<p class="mb-0">4:</p>
</div>
<div class="col-md-6">
<p class="mb-0">D</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
Try adding display: flex; to .alert.alert-dark.
I am trying to align my demo text below my image. I am currently using bootstrap, but how can I do align this below my image and ::after between divs an icon > layout
<section>
<h2 class="main-title">
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Test process</font></font>
</h2>
<div class="container demo">
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
<div class="row" style="text-align: center;">
<div class="steps">
<img src="https://code.google.com/images/developers.png" style="height: 80px;" />
</div>
<div class="col-md-6 col-xs-6">
<h2 class="steps__title">How It Works</h2>
<p>demo</p>
</div>
</div>
</div>
</section>
Firstly you are using very wrong Bootstrap.
Please research how to use container, row, flex and column on Bootstrap. Check this here. Secondly, always use separate divs in col.
That's my snippet check this and please that you preview full page.
.icon img {
margin-top: 10px;
}
.details h2 {
font-weight: 400;
font-size: 25px;
color:#515f7f;
}
.details p {
margin-top: -5px;
}
<!DOCTYPE html>
<html>
<head>
<title>arg0-container</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<section class="mt-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
<div class="col-md-4">
<div class="icon d-flex">
<img src="https://code.google.com/images/developers.png" height="80px" />
<div class="details ml-4 mt-2 text-center d-block">
<h2>How It <br> Works</h2>
<p>Demo</p>
</div>
</div>
<p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
</div>
</div>
</div>
</section>
</body>
</html>
I've creating a block called textCard in WPBakery. The markup for this block is wrapped around default Bakery classes which is rending the markup like this:
.textCard {
border: 1px solid red;
display: flex;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is heading</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is header</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Unsure why the above CSS works when the wrappers are removed:
.textCard {
border: 1px solid red;
display: flex;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing </p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor </p>
</div>
</div>
</div>
</div>
</div>
</div>
.vc_column-inner and .wpb_wrapper have no styles assigned to them so unsure what may be causing this result?
When you put your textCard in to a wrapper then force it to be 100% height, it will take 100% height of the parent wrapper, which in this case had the default property of height: auto; so it was collapsed.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. - W3Schools
The reason it worked when you took out the 2 wrappers is because the col-sm-4 was full height as it got the property align-items: stretch; by default as its parent is display: flex;.
Simply adding a rule to make the wrappers 100% height of their parents as well as textCard fixes this issue.
View CodePen
.textCard {
border: 1px solid red;
display: flex;
}
.vc_column-inner,
.wpb_wrapper,
.textCard {
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is heading</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is header</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is because your styling is no longer affected by actual height, since it's nested with two <div>elements. Following style should be child of class="col-sm-4"
Change style to
.vc_column-inner {
border: 1px solid red;
display: flex;
height: 100%;
}
or move <div class="textCard"> under <div class="col-sm-4">
If i've understood correctly, you don't need to use the bootstrap .col-4 class if you're using display:flex.
You've set the height of the items to be 100% and as display:flex so that means they'll fit the 100% height.
However this happens by default if you set the .container to display:flex and the children .textCard to flex:1 they'll all display equal. The children are set as align-items: stretch by default due to their flex container.
See codepen here, hope that's what you meant!
https://codepen.io/Robhern135/pen/LKaGVL
So i have this demo https://fiddle.jshell.net/nx4s6jsd/ where i have that html structure. I want to remove broder-bottom from last child but i dont know how. I tried with
.product:last-child{
border-bottom:none:
}
but its not working .Any suggestion?
<div class="checkout">
<div class="checkout_title"><span>Vasa narudzba</span></div>
<div class="product custom_form_title order_product_list">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
<div class="product_image">
<img src="assets/img/product1_small.png" class="img-responsive" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="product_box">
<div class="product_title">
<span>Product title</span>
</div>
<div class="product_description">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</div>
<div class="product custom_form_title order_product_list">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
<div class="product_image">
<img src="assets/img/product1_small.png" class="img-responsive" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="product_box">
<div class="product_title">
<span>Product title</span>
</div>
<div class="product_description">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="total custom_form_title order_list">
<span class="left-title">Cijena bez PDV-a</span><span class="right-title">0,000.00 KM</span>
<span class="left-title">PDV(17%)</span><span class="right-title right">0,000.00 KM</span>
<span class="left-title">Postarina</span><span class="right-title right">0,000.00 KM</span>
<span class="left-title">Total cijena</span><span class="right-title right">0,000.00 KM</span>
</div>
</div>
</div>
</div>
you need to wrap .product with in div, the problem is right now in you code .product is not last-child of parent div so check my code snippet
.black_line{
margin-top: 30px;
border-bottom: 1px solid #24282f;
margin-bottom: 20px;
}
.finish_button{
float: left;
margin-bottom: 60px;
}
.finish_button a{
padding: 12px 45px;
}
.right{
float: right;
}
.order_list{
float: left;
margin-top: 20px;
border-top:1px solid black;
border-bottom: 1px solid black;
padding-top: 10px;
padding-bottom: 10px;
}
.order_product_list{
float: left;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #cccccc;
}
.order_product_list:last-child{border: 0;}
<div class="checkout">
<div class="checkout_title"><span>Vasa narudzba</span></div>
<div class="product-holder">
<div class="product custom_form_title order_product_list">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
<div class="product_image">
<img src="assets/img/product1_small.png" class="img-responsive" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="product_box">
<div class="product_title">
<span>Product title</span>
</div>
<div class="product_description">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</div>
<div class="product custom_form_title order_product_list">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
<div class="product_image">
<img src="assets/img/product1_small.png" class="img-responsive" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="product_box">
<div class="product_title">
<span>Product title</span>
</div>
<div class="product_description">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</div>
</div></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="total custom_form_title order_list">
<span class="left-title">Cijena bez PDV-a</span><span class="right-title">0,000.00 KM</span>
<span class="left-title">PDV(17%)</span><span class="right-title right">0,000.00 KM</span>
<span class="left-title">Postarina</span><span class="right-title right">0,000.00 KM</span>
<span class="left-title">Total cijena</span><span class="right-title right">0,000.00 KM</span>
</div>
</div>
</div>
</div>
Don't worry. Just remove style "border-top: 1px solid #cccccc;" from selector ".order_product_list".
Here is the universal solution for this type of situation. Adjacent sibling selector (+).
CSS
Add this
.order_product_list + .order_product_list{
border-top: 1px solid #cccccc;
}
Try with nth-child(3) and it will remove the border, like this:
.product:nth-child(3){
border-bottom: none;
}
If you inspect your code you will see that after last .product div there is another div, so the :last pseudo selector won't select anything
The last-child selector is used to select the last child element of a
parent. It cannot be used to select the last child element with a
specific class under a given parent element.
Better approach would be to wrap all the .product items in another container and then apply .product:last-child selector