[peglegsqueeksParticipant]

WordPress 4.5.3 running X – Child Theme theme.
X-theme Version: 4.6.1

pawdinkum.com.au
pawdinkum.com.au/cart

Hi guys, loving the X-theme.

Just wanted to know if there is a way to correct the cart display on mobile devices.
at the moment the Quantity and Total are too big, the 2 horizontal lines go off the right edge of the screen, the Update Basket button is not centered and the product thumbnail is not displayed.

On a PC or larger screen the Cart screen looks good.
Any help would be appreciated.

My custom CSS is attached.

Kind Regrads
Chris

[peglegsqueeksParticipant]

I forgot to mention that i’m using the Integrity stack and here is a better formatted version of my Custom CSS.

.x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > .current-menu-item > a {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.x-navbar .x-nav > li > a:hover:after, .x-navbar .x-nav > .current-menu-item > a:after {
content:””;
display:block;
border-bottom: 3px solid White;
position:relative;
top: 5px;
left: 1px;
}
.woocommerce div.product .summary .product_title {
margin: 0 0 .25em;
font-size: 228%;
color: white;
}
.woocommerce-result-count { display:none !important; }
.login form {
margin-top: 0px;
margin-left: 0;
padding: 20px 20px 20px;
background: #fff;
}
.woocommerce li.product .entry-wrap {
background-color:white;
}
.woocommerce li.product .entry-header h3{
margin:0;
padding-bottom:0.5em;
font-size:90%;
line-height:1.05;
-webkit-transition:color 0.3s ease;
transition:color 0.3s ease
}
.woocommerce-ordering select{
background-color:white;
}
.woocommerce .entry-wrap {
background-color:white;
}
.woocommerce div.product .summary .product_title {
margin: 0 0 .25em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0.25em;
margin-left: 0px;
font-size: 150%;
color: black;
}
.woocommerce-cart .entry-wrap {
background-image:none;
background-color:white;
}
.woocommerce-checkout .entry-wrap {
background-image:none;
background-color:white;
}
.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart{
font-size:small;
}
/* Change the topbar height */
.x-topbar{
height: 12px;
max-height: 12px;
min-height: 6px;
color:White;
font-size:small;
/* Adjust to fit your needs */
}
/* Change the topbar font size */
.x-topbar .p-info, .x-topbar .p-info a{
font-size:small;
}
.entry-title {
margin: 0;
font-size: 150%;
line-height: 1.05;
}
.woocommerce .x-cart-empty .cart-empty {
margin: 0 0 .85em;
font-size: .8em;
line-height: 1;
}
.woocommerce .cart .actions > input {
float:left;
position: center;
text-align: center;
margin-top: .5em;
margin-left: .5em;
font-size: 60%;
vertical-align: middle;
}
.woocommerce .cart.shop_table {
margin: -1px;
padding-right: 0px;
font-size:8;
}
@media (max-width: 320px){

table th, table td {
padding: 0.5em 0.125em;
}
.woocommerce-checkout p#billing_email_field,.woocommerce-checkout p#billing_phone_field {
width: 100%;
}
h3, .h3{
font-size: 10px !important;
}
.h1, h1 {
font-size: 10px !important;
}

}@media (max-width:480px){
.woocommerce div.product .woocommerce-tabs h2, .woocommerce-page div.product .woocommerce-tabs h2

font-size: 100%;
}
div#tab-description {
font-size: 10px;
}
}

[JoaoModerator]

Hi There,

Upon checking your cart page I did not notice anything to be fixed. Would you mind clarifying what you are referring to?

Thanks

Joao

[peglegsqueeksParticipant]

Sure when I look at the cart page on an Android Samsung Galaxy Note III using Chrome browser: pawdinkum.com.au/cart when there are some products in the cart. The Quantity and Total are too big, the 2 horizontal lines go off the right edge of the screen, the Update Basket button is not centered and the product thumbnail is not displayed. Please refer to Screen Shot.

On an Iphone 5s: the Quantity and total columns are centered. but the product thubnail is way too small it apears almost as a dot, and the update basket button is not centered.

I hope this helps.

regards
Chris

[peglegsqueeksParticipant]

Hi Guys,

For the sake of clarity the only way you can see the shop, cart , and checkout pages on my site at the moment is by going to their URL’s The sites “SHOP” menu is just a static page. I will activate the woocommerce pages when I’m happy with them.

http://pawdinkum.com.au/shop/
http://pawdinkum.com.au/cart/
http://pawdinkum.com.au/checkout/

Kind Regards
Chris G

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:450px){
table thead th {
    vertical-align: bottom;
    font-size: 12px;
}
table th, table td {
    padding: .5em .325em;

}
table td {
    font-size: 12px;

}
}

Hope it helps.

[peglegsqueeksParticipant]

Hi Christopher,

I’ve added the code to custom css.

No change, It didn’t work.

Cheers
Chris G

[RadModerator]

Hi there,

Would you mind providing your login credentials? For the meantime, please clear or disable your cache plugin. It could be the reason it’s not taking effect.

Thanks!

[peglegsqueeksParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Your existing CSS has no opening bracket.

.woocommerce div.product .woocommerce-tabs h2, .woocommerce-page div.product .woocommerce-tabs h2 

font-size: 80%;
}

I went ahead and fixed it, and the above CSS now starts working. There is no caching on your site, but the codes are minified which I’m not sure which one is causing it. Minified code is what makes troubleshooting on live page a bit harder

Thanks!

[peglegsqueeksParticipant]

WOW thanks guys I tottaly missed that open bracket. No wonder the following code didn’t take effect. Thank you for your help.

It worked now my Android device is showing the correct layout.

Just 1 more thing any idea how to get the UPDATE CART box to be centered, I’ve tried a number of things, but nothing seems to work.
at the moment i have this CSS :- Which is putting it to the far left, I would like it to be centered, like the PROCEED TO CHECKOUT BOX.

.woocommerce .cart .actions > input {
float:left;
position: center;
text-align: center;
margin-top: .5em;
margin-left: .5em;
font-size: 60%;
vertical-align: middle;
}

Your support is why I’m considering my 3rd X-theme licence.

Kind regrards
Chris G

[Prasant RaiModerator]

Hello Chris,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.woocommerce .cart .actions>input {
    float: none !important;
    display: block;
    margin: 15px auto;
}

Thanks.

[peglegsqueeksParticipant]

It worked thankyou guys! I am always impressed by the great support you have at x-theme.

I never thought to use Float: none !important;

Thanks again guys

Will be recommending X-theme to all my clients.

Kind Regards
Chris G

[FriechModerator]

Thank you for the kind words, we’re delighted to assist you with this

Cheers!

[Author]

Posts