Wishlist page not mobile responsive

Hi

try to add the following CSS at the end of Additional CSS section of your theme customizer (WP Dashboard -> Appearance -> Customize)

.wishlist_table.mobile li {
    position: relative;
    margin-bottom: 50px;
}
.wishlist_table.mobile li .item-wrapper {
    width: 100%;
}
.wishlist_table.mobile .additional-info-wrapper {
    margin-top: -15px;
}
.wishlist_table.mobile .additional-info-wrapper .additional-info {
    margin-left: 74px;
    width: calc(100% - 80px);
}
.wishlist_table.mobile li .additional-info-wrapper .product-add-to-cart {
    margin-top: 20px;
}
.wishlist_table.mobile li .additional-info-wrapper .product-remove {
    position: absolute;
    bottom: 0;
    left: auto;
    right: 10px;
}

This is the final result that I get on your site

Hi, the code worked for mobile upto 320px. Did not work beyond that. I need the same to reflect on devices upto tab 768px.

Hi again

The rules that I shared should work for wishlist mobile layout, no matter the screen resolution

I just checked your site and it seems that, even if rules are added to your page, they are not interpreted; this makes me think that there is an error in the CSS above our code, preventing our rules from being correctly parsed

Please, review CSS code that you added to Additional CSS section of theme customizer, or at least place our rules on top of that section

You were right, after placing the code in the beginning of Additional CSS, it worked just fine. Thanks for your support!

How do I get the table headers: Price & Stock in Uppercase?
How to get stock status in #297e29 colour just like the desktop table.

Hi again

Please, try with the following rules

.wishlist_table.mobile .item-details-table td.label, .wishlist_table.mobile .additional-info td.label {
    text-transform: uppercase;
}

.wishlist_table.mobile .additional-info .wishlist-in-stock {
    color: #297e29 ;
}

Hi, the solutions worked. Thanks!

How to increase the product thumbnail size in wishlist table on mobile and desktop?

• This reply was modified 3 years, 9 months ago by brandmadeconsult.

Hi there

Try with these rules

.wishlist_table tr th.product-thumbnail {
    width: 120px;
}

.wishlist_table.mobile li .item-wrapper .product-thumbnail {
    max-width: 80px;
}

.wishlist_table.mobile li .item-wrapper .item-details {
    width: calc(100% - 100px);
}
.wishlist_table.mobile .additional-info-wrapper .additional-info {
    margin-left: 94px;
    width: calc(100% - 100px);
}

Please, for your next request open a separate thread: one single thread with many topics won’t help people searching for solution to their problems on this forum

Sure. Thanks!

I had applied this code to increase thumbnail size:

.wishlist_table tr th.product-thumbnail {
width: 120px;
}

When I set the width to 100px or 120px the thumbnail size doesn’t change beyond 100px.

I actually wan the thumbnail size bigger than currently what I have. Please advice.

You’re right; you’ll also need this rule

.wishlist_table tr td.product-thumbnail a {
    max-width: 100%;
}

Thanks, that worked perfectly!

For Out of stock products in wishlist table, the delete button overlaps with text on mobile. Please check screenshot:

https://prnt.sc/10dpnb2

Pls suggest how to resolve the same.

Could you please point out an out of stock product on your store?
I tried with the same of your screenshot, but is seems it is back in stock now