Niara theme - the product summary in cart is not responsive

[netamismb]

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?

[nickz]

As a client or do you work with your phone on your shop?

[netamismb]

As a client.

[nickz]

Ok and the TB Version?

[netamismb]

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.

Edited October 1, 2023 by netamismb

[x97wehner]

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.

[nickz]

most of the times we use tb 1.3 and Niara without issues.

Can't you drop the url like domain + extension?

[netamismb]

The link is ...., how to reproduce:

- add a product to the cart, 

- go to checkout (ir a la caja)

- the product and the description are visible, but one needs to scroll horizontally to see the price, quantity and total price 

Edited March 14 by netamismb

[toplakd]

Neither Niara nor Community Theme are mobile friendly when in shopping cart.

Here in comparisson Niara vs Community vs MyOwn

 

[toplakd]

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 October 4, 2023 by toplakd