Cart Styling

[bestfitbybrazil]

To create this cart view on mobile, I used the code below.  How can i get rid of the lines except a single one to separate each product and remove space gaps.  see my css below.  i think i may have went the wrong route to set up columns.  i want to image and details of each product on 1 row.

.product-thumbnail {
position: relative;
column-count: 3;
padding: 3px;
}

.product-name{
position: relative;
float: right;
width: 70%;
top: -180px;
padding-bottom: 12px;
font-size: 12px;
}

.product-price{
position: relative;
float: right;
width: 69%;
top: -180px;
padding-bottom: 2px;
padding-top: 2px;
font-size: 12px;
}

.product-quantity{
position: relative;
float: right;
width: 69%;
top: -180px;
padding-bottom: 2px;
padding-top: 2px;
font-size: 12px;
}
.product-subtotal{
position: relative;
float: right;
width: 69%;
top: -180px;
font-size: 12px;
padding-bottom: 2px;
padding-top: 2px;
}

.product-remove{
position: relative;
float: right;
width: 69%;
top: -180px;
font-size: 12px;
padding-bottom: 1px;
padding-top: 1px;
}

.remove{
position: relative;
padding: 1px;
top: 10px;
font-size: 30px;
right: -60px
}

.remove::before{
content: “REMOVE “;
font-size: 18px;
padding-top: 2px;
}

.cart_item {
position: relative;
height: 200px;
}

[Harry]

Hi,

Change code of product-name, product-price, quantiy, sub-total, remove position to absolute and right: 0 and adjust top for separate element

.product-thumbnail {
position: relative;
column-count: 3;
padding: 3px;
}

.product-name{
position: absolute;
right:0;
width: 70%;
top: -180px;
padding-bottom: 12px;
font-size: 12px;
}

.product-price{
position: absolute;
right:0;
width: 69%;
top: -180px;
padding-bottom: 2px;
padding-top: 2px;
font-size: 12px;
}

.product-quantity{
position: absolute;
right:0;
width: 69%;
top: -180px;
padding-bottom: 2px;
padding-top: 2px;
font-size: 12px;
}
.product-subtotal{
position: absolute;
right:0;
width: 69%;
top: -180px;
font-size: 12px;
padding-bottom: 2px;
padding-top: 2px;
}

.product-remove{
right:0;
float: right;
width: 69%;
top: -180px;
font-size: 12px;
padding-bottom: 1px;
padding-top: 1px;
}

.remove{
position: absolute;
padding: 1px;
top: 10px;
font-size: 30px;
right: -60px
}

.remove::before{
content: "REMOVE";
font-size: 18px;
padding-top: 2px;
}

.cart_item {
position: relative;
height: 200px;
}

But it still defend on the length of product title name.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

ok what about the lines.  i only need 1 line to separate each product from the next.  how to remove all the lines in between the fields?

[Harry]

Hi,

Please add more code

.product-name,.product-price,.product-quantity,.product-subtotal,.product-remove {border-bottom: none;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I can’t get this space out.  i tried using .cart_item but it doesn’t close the gap. how to adjust this

[bestfitbybrazil]

i figured it out

[bestfitbybrazil]

ok this is the final code for mobile view.  looked good on computer when i shrink the screen down.  but on mobile it all clustered together.

/* position product image*/
@media only screen and (max-width: 768px) {.product-thumbnail {
position: relative;
/*column-count: 3 */
padding-bottom: 10px;
padding-top: 5px;
width: 32%;
height: 230px;
float: left;
top: 1px;
border-style: none;
}
}

/* position product name */
@media only screen and (max-width: 768px) {.product-name{
position: absolute;
right: 0;
width: 69%;
top: 0px;
padding-bottom: 12px;
font-size: 12px;
}
}

/* position price */
@media only screen and (max-width: 768px) {.product-price{
position: absolute;
right: 0;
width: 69%;
top: 63px;
padding-bottom: 2px;
padding-top: 2px;
font-size: 12px;
height: 39px;
}
}

/* position quantity */
@media only screen and (max-width: 768px) {.product-quantity{
position: absolute;
right: 0;
width: 69%;
top: 102px;
padding-bottom: 2px;
padding-top: 2px;
font-size: 12px;
}
}

/* position subtotal price */
@media only screen and (max-width: 768px) {.product-subtotal{
position: absolute;
right: 0;
width: 69%;
top: 144px;
font-size: 12px;
padding-bottom: 2px;
padding-top: 2px;
}
}

/* position remove button */
@media only screen and (max-width: 768px) {.product-remove{
position: absolute;
right: 0;
width: 25%;
top: 170px;
font-size: 10px;
padding-bottom: 1px;
padding-top: 1px;
}
}

/* position remove text */
@media only screen and (max-width: 768px) {.remove::before{
content: “REMOVE “;
font-size: 13px;
padding: 2px;
border-style: solid;
border-width: 1px;
}
}

/* position cart section */
@media only screen and (max-width: 768px) {.cart_item {
position: relative;
height: 100px;
}
}

/* remove lines */
@media only screen and (max-width: 768px) {.product-name,.product-price,.product-quantity,.product-remove {
border-bottom: none;
}
}

/* add certain lines back in */
@media only screen and (max-width: 768px) {.product-name, .product-price,.product-quantity,.product-subtotal{
border-top: solid !important;
border-width: 1px !important;
border-left: solid;
margin-right: -1px;
}
}

/* add certain lines back in */
@media only screen and (max-width: 768px) {.product-subtotal{
border-bottom: solid;
}
}

[Author]

Posts