Little problem with Woocommerce

[Prisca]

Hello

A client had noticed that on the checkout page the “Proceed to checkout button shows only “Proceed … ” to checkout is white outside the button. (see attached) – cornerssurf.com

Also the related products below the product description page has a wide white space between images – images are like thumbnails (see attached also)

Thank you so much for your help 🙂
PROCEED-TO-CHECOUT-CUT-OFF.jpg
related-products.jpg

Attachments:

You must be logged in to view attached files.

[Binaya D]

Hi Prisca,

We visit your site and it works fine here, so could you please check once. We have attached the screenshots also.

Thanks
rsz_cart___corners_surf.png
rsz_electric_knoxville_alpine_blue_sunglasses___corners_surf.png

Attachments:

You must be logged in to view attached files.

[Prisca]

Please check with mobile size and see the buttons Proceed to checkout.

Thanks.

[Prisca]

Please could you reply with a fix for the mobile view of the buttons “proceed to checkout” that are cut off? See my previous screenshots. Yours show the site in wide view – not on mobile.

Thanks

[Bidur]

Hi There,
sorry for late reply

The issue you are facing is due to that class ( .woocommerce .cart-collaterals ) is getting width of 24%. so make it full browser width for mobile device using media query.

for eample
@media screen and (max-width: 620px) {
.woocommerce .cart-collaterals {
width: 100%;
}
}

[Prisca]

Thank you. I will try that 🙂

[Prisca]

Hello

Sorry but it does not seem to work. Please see attached on mobile size: cornersurf.com

Thank you 🙂

not-working.jpg

Attachments:

You must be logged in to view attached files.

[Bidur]

HI There,

Your custom css is being overridden. Please use either important or override by taking parent class. and remember my previous reply use media query, otherwise it’ll affect design in desktop view

Thanks

[Prisca]

Hello Madan

Sorry but I don’t understand what you mean.

If you look at my CSS in the child theme I add this – exactly what you said:

@media screen and (max-width: 620px) {
.woocommerce .cart-collaterals {
width: 100%;
}
}

is there something else I should add in other CSS? Please be clear – I can be dense sometime ha ..

Thanks 🙂

[Bidur]

hello,
I looked your child theme css and it lacks the code i sent you in previous reply. please be sure you did it correctly..

also don’t miss to use @media Query to target to small device
i’have attached some screenshot for reference
1.jpg
2.jpg

Attachments:

You must be logged in to view attached files.

[Prisca]

Oh boy … I don’t know what happened – SO SO sorry! I probably uploaded it on another site.

Now it is working on cornerssurf.com.

So sorry about that!

Thank you so very much and please forgive me for my stupidity 🙂

[Bidur]

Glad i helped You 🙂
Thanks

[Author]

Posts