CSS Help

[Rahim]

Hi Harry,

I don’t see the heart button and eye for quick pop up in tablet devices in landscape mode!

http://take.ms/ABwZa

I would like to have them in high resolution tablet devices.

Thank you.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

On iPad Pro user will touch to product to have quick view button. This screen resolution of ipad pro equal with most laptop screen resolution.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

Well I checked in most of the tablet sizes like ipad, ipad mini … and none of them have the option.

I have disabled the quick shop button , so I would like to have it on landscape tablets.

Thank you.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

beside the heart button.

Both of them.

Kind regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Did you check on real device?

If you disable quick shop button it can’t show on any device.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

Yeah. I checked that on my Galaxy Tab S 4 (10.1″) = 800×1280

I don’t want quick shop button.

I want the heart button and quick preview on the landscape tablets.

I have the heart button and quick preview on the tablets only on the Portrait mode.

Portrait : http://take.ms/xp9Nm

Landscape : http://take.ms/y68Wmv

I checked this on tablets on landscape. none of them have it.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

In resolution 1280 it fit with Macbook 13′

Please add below code

@media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  {

.btn-quickview {
    left: 61px!important;
}
text-indent: -999em;
    background: none;
    border: none;
    padding: 0;
}
[dir="rtl"] .btn-quickview::after {
    left: auto;
    right: 0;
}
.btn-quickview::after {
    color: #878787;
    content: '\e63e';
    font-family: "Pe-icon-7-stroke";
    font-size: 20px;
    left: 0;
    position: absolute;
    text-indent: 0;
    top: 0;
    z-index: 99999;
}

Kind regard

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

Thank you for the help.

I added the code and deleted the cache and but it’s not affected in the targeted resolutions!

And also does it include the heart button of the Yith wishlist?

Thank you.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please change code to

@media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  {
.product-btn {
    opacity: 1;
    visibility: visible;
    color: #878787;
}
.btn-quickview {
    left: 61px!important;
}
text-indent: -999em;
    background: none;
    border: none;
    padding: 0;
}
[dir="rtl"] .btn-quickview::after {
    left: auto;
    right: 0;
}
.btn-quickview::after {
    color: #878787;
    content: '\e63e';
    font-family: "Pe-icon-7-stroke";
    font-size: 20px;
    left: 0;
    position: absolute;
    text-indent: 0;
    top: 0;
    z-index: 99999;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

This reply has been marked as private.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please change code to

@media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  {
.product-image .yith-wcwl-add-button a, .product-btn {
    opacity: 1;
    visibility: visible;
    color: #878787;
}
.product-image .product-btn .button {
    display: none;
}
.product-btn {
    left: auto;
right: 12px;
}
.btn-quickview {
    left: 61px!important;
    text-indent: -999em;
    background: none;
    border: none;
    padding: 0;
}
[dir="rtl"] .btn-quickview {
left: auto;
    right: 61px!important;
}
[dir="rtl"] .btn-quickview::after {
    left: auto;
    right: 0;
}
.btn-quickview::after {
    color: #878787;
    content: '\e63e';
    font-family: "Pe-icon-7-stroke";
    font-size: 20px;
    left: 0;
    position: absolute;
    text-indent: 0;
    top: 0;
    z-index: 99999;
}
.yith-wcwl-add-to-wishlist ~ .product-btn {
    top: 30px !important;
}
}

For the customize task you should hire freelancer to help you do it faster.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

Thank you so much for taking care of your customers 🙂

Unfortunately this is not working again.

Well I think maybe it’s not lots of customization.

I just want to have it in the larger resolutions in the same place and same configurations.

Anyway, so much of thanks to you and the team. 🙂

Rahim

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

I check on my local it work well http://take.ms/aO3Kt

Just need more update in prev css is

.yith-wcwl-add-to-wishlist ~ .product-btn {
    top: 60px !important;
}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

This reply has been marked as private.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

I check your site it now work http://take.ms/4x1tZ

Please clear cache of browser to check again

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Harry,

I think something is wrong with this :

@media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {

Because I just checked that, I can see them in the ipad pro which is : 1366*1024 but I cannot see them on my galaxy tab which has less resolation : 1280*800

 

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Please try @media only screen and (max-device-width: 1366px) {

and add more code

@media only screen and (max-device-width: 800px) {
.yith-wcwl-add-to-wishlist~.product-btn {
    top: 30px!important;
}}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Thank you so much Harry,

Now it’s working great.

I Just changed the :

@media only screen and (max-device-width: 800px) {
.yith-wcwl-add-to-wishlist~.product-btn {
top: 30px!important;
}}

to

@media only screen and (max-device-width: 1024px) {
.yith-wcwl-add-to-wishlist~.product-btn {
top: 30px!important;
}}

Because in vertical mode of the ipad pro : 1024*1366 the heart button was down.

Thank you.

Rahim Vaziri
CEO & Founder at Look.ir

[Author]

Posts