Jods

Hi Misplon,

I tried your above code but it didn’t work, thanks

but i used this one it it kinda worked, although it changed all buttons on my website, i would have rathered at least the continue shopping button a different color but with this code it changes every button on the website. I cannot seem to find any other code that works so i guess i will have to live with them all the same colour, here is the code:

a.button,
.button.alt,
.button,
input.button,
button.button,
a.comment-reply-link,
#commentform #submit,
#btn-cart a,
#btn-cart a span.btn-cart-inner {
background:#0e8b8b!important;
background:-webkit-gradient(linear,left top,left bottom,from(#0e8b8b),to(#0c7474))!important;
background:-webkit-linear-gradient(#0e8b8b,#0c7474)!important;
background:-moz-linear-gradient(center top,#0e8b8b 0%,#0c7474 100%)!important;
background:-moz-gradient(center top,#0e8b8b 0%,#oc7474 100%)!important;
border-color:#343538!important;
color:#ffffff!important;
text-shadow:0 -1px 0 rgba(0,0,0,0.6)!important;
}
a.button:hover,
.button.alt:hover,
.button:hover,
input.button:hover,
button.button:hover,
a.comment-reply-link:hover,
#commentform #submit:hover,
#btn-cart a:hover,
#btn-cart a span.btn-cart-inner:hover {
background:#0e8b8b;
background:-webkit-gradient(linear,left top,left bottom,from(#0e8b8b),to(#0c7474));
background:-webkit-linear-gradient(#0e8b8b,#0c7474);
background:-moz-linear-gradient(center top,#0e8b8b 0%,#0c7474 100%);
background:-moz-gradient(center top,#0e8b8b 0%,#0c7474 100%);
color:#343538;
text-shadow:0 -1px 0 rgba(0,0,0,0.6)
}
}
thanks again

I found a fix thanks

Hey Misplon,
Thanks I tried everything with the float: rule but nothing helped,
but i did find something that did fix it nicely and its all looking very good, the fix was this:

.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
padding: .5em 0;
margin: 0;
font-size: 1em!important;
min-height: 44px;
}

Worked a treat, thanks again for answering and helping
Hope this may help someone else

I worked out a fix for this and it works great this is the code I put in to create a space between each product in the cart:

.woocommerce table.shop_table td.product-subtotal {
margin-bottom: 20px;
}

Hope this helps someone

I have tried this but it did not work:

@media (max-width: 1024px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin-bottom: 30px;
}
}

Will do, Thank You

Apologies the code was this one, I grabbed the wrong one:

@media (max-width: 568px) {
body.responsive.woocommerce-page #container ul.products li.product {
text-align: center;
}
}

Hi Misplon, I added this code: @media (max-width: 480px) {
body.responsive.woocommerce-page #container ul.products li.product {
text-align: center;
}
}

and that fixed the landscape problem, so alll that is all fixed now, thank you very much for your patience and all your expertise help, its greatly appreciated.

I have a couple more issues that i need help with as well, would you prefer I start a new thread?
Thank You

I also found the demo mode thank you.

Should I use a wider max-width media query for landscape mode? Would that work?

Thanks

I did that thanks and it that did work in portrait mode but it still is left aligned in landscape mode on the mobile, thanks

I did add a closing bracket last night in this code to see if it made a difference but it didn’t, but I was placing the closing bracket at the very end, was that the correct place to put it?
I will go ahead now and do it again and I will try your rule at the top, thanks

Also i’m trying to find a demo mode in the settings, without much luck at the moment, thanks again for your time

Sorry I had to go to bed, I’m just trying to help a friend finish this website and she doesn’t like it live in case someone goes into the shop and purchases something. As its not a live website yet. But I’ve turned it back on now for a little while, you’re help us greatly appreciated, thank you

Thanks I fixed that and tried again but still no joy, thanks

Thanks Misplon, should there be a ; where the bracket was?
Ive fixed that and i tried your suggestion: @media (max-width: 480px) {
body.responsive.woocommerce-page #container ul.products li.product {
text-align: center;
}
}
but nothing changed on the mobile, it just seems nothing i try works on the mobile, it looks like woo commerce is very responsive to mobiles. I’d love to try and get it fixed somehow. thanks

Thanks Terrytsang but that moved everything closer, I also have this code as well:

.woocommerce-page table.shop_table td {
/* Behave like a “row” */
border: 1px solid #d2d3d3;
border-radius: 5px;
background: #f3f3f3;
margin-bottom:5px;
position: relative;
padding-left: 30% !important;
}

but what I want is to have just a little bit of a gap between items in the cart, just a little easier for older people to read what they have in there. if i adjust the margin-bottom it puts a padding around each section eg price, product, delete, subtotal rows, i only want padding in between each whole product, if that makes sense, thanks