Community Forums

Ludjon –

Thank you! That didn’t do it initially, but I adjusted it to width:70%; font-size:14px;
and that is now working for laptops/tablets.

However, it’s still scrunched up for mobile devices, which makes the UX really unpleasant. Most of our customers are visiting us on their mobile devices, so it’s imperative that the checkout experience be simple and easy to read – which it isn’t right now. Is there any way to make the cart table responsive, so that the column widths and/or font size adjusts for mobile devices depending on the screen size? We need each line (shipping options, address, etc.) to appear on one line only.

We do have this other custom CSS already, in case that is causing conflict:

.woocommerce-cart .woocommerce form { width: 100% !important;}
.woocommerce-cart .woocommerce .cart-collaterals { width: 100% !important;}

and

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
width : auto;
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table {
float: right;
padding: 6px 10px 0px 10px;
}

Thanks!
Rebecca

Thank you! That worked to fix the navigation menu for Firefox and Internet Explorer. Unfortunately, for those browsers the font is now so tiny I’m concerned it is too difficult to read for elderly people. Is there any way to fix the spacing/margins of the menu without making the font so small?

Also, the other issue still isn’t resolved: If you search using Chrome or Opera, the search results show up as one long line of results, rather than 3 columns (almost as if it’s defaulting to mobile settings.)

Thanks!
Rebecca

I’m so sorry about that – I forgot to change your user profile to admin. You should be able to easily log in now.

My laptop/tablet is a Microsoft Surface Pro 7 – it’s a 12.3″ display.

I added the code, and didn’t help. Hopefully by being able to log in to the site now you can poke around and see what will work.

Is there any way to fix the issue that doesn’t involve a separate CSS code for every different size tablet/smartphone? The only reason I even saw this issue is because I got a new laptop – if I had been on my old laptop, I would’ve assume the template was fully responsive for all devices. It makes me concerned that there are other devices out there where the site navigation isn’t adjusting, which could lose us business if customers become frustrated.

Please see a new related issue that has popped up – I opened a new ticket: https://support.codeless.co/?topic=margins-off-header-search-for-some-browsers

That worked perfectly, and looks great. Thank you!

Also – I just spent some more time on this, and it appears that the issue is only occurring in Chrome and Edge browsers. Firefox and Opera do not have any issues (the mini-cart and search bar are located in the correct spot). When comparing Firefox to Chrome, I see that for Firefox the font on the navigation menu is smaller (which may be allowing more space in the header for the cart/search bar to fit.) So it seems there may be an issue with the menu font not adjusting for smaller screens?

• This reply was modified 6 years, 5 months ago by rebeccaolson.