Wishlist-View table won’t auto-adjust on mobile

Hello there,

hope you are doing well ??

Please, apply this CSS rules in Appearance -> Customize -> Additional CSS:

#yith-wcwl-form .wishlist_table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #yith-wcwl-form .wishlist_table tr {
    border-bottom: 3px solid #ddd;
    display: block;
  }
 
  #yith-wcwl-form .wishlist_table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

Additionally, you can add this CSS rule to show the images:

@media( max-width: 768px ){
    .wishlist_table th.product-thumbnail,
    .wishlist_table td.product-thumbnail{
        display: table-cell!important;
    }
}

Let us know.

Have a great day!

Hi there @yithemes

Thanks for your help, however this changes the layout for both mobile and desktop.
It surely prevent the issue mentioned on mobile but on desktop is is worst looking in this way, how can i set this to be visibile this way on mobile only?

Thanks

Hi there,

please try to use this code:

@media( max-width: 768px ){
#yith-wcwl-form .wishlist_table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  #yith-wcwl-form .wishlist_table tr {
    border-bottom: 3px solid #ddd;
    display: block;
  }
 
  #yith-wcwl-form .wishlist_table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

    .wishlist_table th.product-thumbnail,
    .wishlist_table td.product-thumbnail{
        display: table-cell!important;
    }
}

This should be applied only on mobile view.