Quick view button disappear after css change

[theDoris]

Hi, In global.css I add

@media (min-width: 1366px)
global.css:1149
.container {
    max-width: 1300px;
}

after that quick view button stop showing on product list, I try add in product_list.css another @media min width but this is not working, this is my site:xxx Please somebody help me solve this problem. Edited April 12, 2017 by theDoris (see edit history)

[theDoris]

Any tips?

[Adeko.nl]

Hello theDoris,

 

The problem is in your product_list.css (Themes > your_theme > css > product_list.css).

You have to remove line 46:

@media (min-width: 1200px)
product_list.css:46
ul.product_list .product-image-container .quick-view {
    display: none;
}

Maybe you should empty your cache afterwards if you dont see any changes.

You can do this under Advanced Parameters > Performance in your backoffice.

[theDoris]

This is not cache issue because I remove all change in this file but even when I edit all min-width:1200 to 1366 still quick view not show up. I already try many thing adding another min-width declaration etc. and nothing work for me. When I remove change in global.css button is showing normally, you can check it by editing it in browser using console dewelopers tools.

[JeredBolton]

What are you trying to do?

 

Do you want the Quick View button to be hidden on the desktop?

 

This statement:

 

@media (min-width: 1200px)

 

is hiding the Quick View button if the viewport is 1200 pixels wide or wider.

[Adeko.nl]

@media (min-width: 1200px)
product_list.css:46
ul.product_list .product-image-container .quick-view {
    display: none;
}

This means that when the screen size is above 1200px, the button gets a display: none.

So as I said before, to display the button on bigger screen sizes you have to remove that line of code.

 

You could also force it by adding the following code to the global.css:

#category a.quick-view {
     display: block!important;
}

Edited April 12, 2017 by Adeko.nl (see edit history)