Jump to content
thirty bees forum

Niara theme - the product summary in cart is not responsive


netamismb

Recommended Posts

I have an issue with the cart - Niara theme, the product summary in the cart is not responsive 

Steps to reproduce:

- Add a product to cart

- Confirm

- The product summary is not responsive - you need to scroll to the right to see the quantity and the price

 How can I make this responsive?

image.jpeg

Link to comment
Share on other sites

On 10/1/2023 at 7:14 AM, netamismb said:

Is not related to TB version, I am using Niara v1.3 and Tb 1.3 in one site and in another TB 1.4. Might be the issue the cart module.

Not responsive, as in the lettering flows off screen? Or as in it locks up and doesn't work? If the former, then different devices may render it differently. Just check to see that your css implemented with custom code on TB isn't interfering with the default theme stying css.

Link to comment
Share on other sites

You can add this at the end of your global.css and it works in Niara and Community default to get basic responsive shopping cart.

This is extracted from very old original prestashop 1.6 bootstrap theme with minimal edits to fit Niara and Community theme.

 

@media (max-width: 767px) {
  #order-detail-content #cart_summary table, #order-detail-content #cart_summary thead, #order-detail-content #cart_summary tbody, #order-detail-content #cart_summary th, #order-detail-content #cart_summary td, #order-detail-content #cart_summary tr {
    display: block; }
  #order-detail-content #cart_summary thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; }
  #order-detail-content #cart_summary tr {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 7px;
    overflow: hidden;
    position: relative; }
  #order-detail-content #cart_summary td {
    border: none;
    position: relative;
    float: left;
    white-space: normal;
    padding: 7px; }
    #order-detail-content #cart_summary td.cart_product {
      text-align: left; }
    #order-detail-content #cart_summary td.cart_avail {
      display: none; }
    #order-detail-content #cart_summary td.cart_unit {
      width: 33%;
      text-align: left;
      min-height: 70px;
      clear: both; }
      #order-detail-content #cart_summary td.cart_unit .price {
        text-align: left; }
    #order-detail-content #cart_summary td.cart_quantity {
      width: 33%;
      min-height: 70px;
      border-left: 1px solid #cccccc;
      border-right: 1px solid #cccccc; }
      #order-detail-content #cart_summary td.cart_quantity div {
        display: block; }
      #order-detail-content #cart_summary td.cart_quantity > .form-control {
        display: inline; }
      #order-detail-content #cart_summary td.cart_quantity > .cart_quantity_button a {
        margin-right: 0px;
        float: none; }
    #order-detail-content #cart_summary td.cart_total {
      width: 33%;
      min-height: 70px;
      text-align: right; }
    #order-detail-content #cart_summary td.cart_delete {
      position: absolute;
      right: 0px;
      top: 0px; }
      #order-detail-content #cart_summary td.cart_delete:before {
        content: '' !important; }
    #order-detail-content #cart_summary td div {
      display: inline; }
  #order-detail-content #cart_summary td:before {
    content: attr(data-title);
    font-weight: bold;
    display: block; }
  #order-detail-content #cart_summary tfoot td {
    float: none;
    width: 100%; }
    #order-detail-content #cart_summary tfoot td:before {
      display: inline; }
  #order-detail-content #cart_summary tfoot tr .text-right, #order-detail-content #cart_summary tfoot tr tbody td.cart_unit, #order-detail-content #cart_summary tbody tfoot tr td.cart_unit, #order-detail-content #cart_summary tfoot tr tbody td.cart_total, #order-detail-content #cart_summary tbody tfoot tr td.cart_total, #order-detail-content #cart_summary tfoot tr .price {
    display: block;
    float: left;
    width: 50%; } }
@media (max-width: 768px) {
  #order-detail-content #cart_summary tbody td .price {
    text-align: center; }
  #order-detail-content #cart_summary tbody td.cart_description {
    width: calc(100% - 130px); }
.cart_voucher {
  vertical-align: top !important; }
  .cart_voucher h4 {
    font: 600 18px/22px "Open Sans", sans-serif;
    color: #555454;
    text-transform: uppercase;
    padding: 7px 0 10px 0; }
  .cart_voucher .title-offers {
    color: #333;
    font-weight: bold;
    margin-bottom: 6px; }
  .cart_voucher fieldset {
    margin-bottom: 10px; }
    .cart_voucher fieldset #discount_name {
      float: left;
      width: 219px;
      margin-right: 11px; }
  .cart_voucher #display_cart_vouchers span {
    font-weight: bold;
    cursor: pointer;
    color: #777; }
    .cart_voucher #display_cart_vouchers span:hover {
      color: #515151; }
}

 

Edited by toplakd
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...