Cart page layout

Resolved matthewhyatt1
(@matthewhyatt1)

8 years, 3 months ago

Hi there I wondered if anyone could help me on this:

I am currently updating a business site (to cut a long story short previous person that was looking on this site past away!). Now I am sort of newish to WordPress and all its plugins. I have managed to tweak a few bits and bobs, but I am stuck on trying to update this cart page (for desktop and mobile view). Now you can see that the shipping details have been placed to one side, i would like this fit to width or stretched out bigger. Also when viewed on mobile the list of products area is chopped off the screen.

Now from what i can see this is connected to WooCommerce, using WPBakery Page Builder and Qode Options Bridge Child 1.0.0 I believe most of the settings sit in the Qode Options Bridge Child 1.0.0. but if anyone can help that would be grateful!!!!

thanks!

[ Please do not bump. ]

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

(@lorro)

Try this custom css:

/* shipping details */
.woocommerce div.cart-collaterals div.cart_totals {
  width: auto !important;
}
/* example shrink table in steps */
@media screen and (max-width: 480px) {
  .woocommerce .content .container .container_inner,
  .woocommerce-page .content .container .container_inner {
    margin-left: 30px !important;
    margin-right: 30px !important;
    width: 380px !important;
  }
  .vc_column_container .vc_column-inner {
    padding-left: 0 !important ;
    padding-right: 0 !important ;
   }
   .woocommerce-cart-form {
     font-size: 14px;
   }
   .product-thumbnail {
     display: none;
   }
}
@media screen and (max-width: 375px) {
  .woocommerce .content .container .container_inner,
  .woocommerce-page .content .container .container_inner {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: 300px !important;
  }
  .woocommerce-cart-form {
     font-size: 13px;
  }
}
@media screen and (max-width: 360px) {
  .woocommerce .content .container .container_inner,
  .woocommerce-page .content .container .container_inner {
    width: 284px !important;
  }
}

Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS

Thread Starter

matthewhyatt1

(@matthewhyatt1)

8 years, 3 months ago

Brilliant this works! Thank you for your time and help on this!

Viewing 2 replies - 1 through 2 (of 2 total)