CSS Help

Topic Resolution: Resolved

This topic has 17 replies, 2 voices, and was last updated 6 years, 4 months ago by Rahim.

Viewing 17 reply threads

Save

Author

Posts
- September 6, 2018 at 5:02 pm #24464
  
  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
- September 6, 2018 at 5:36 pm #24468
  
  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
- September 6, 2018 at 5:42 pm #24469
  
  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
- September 6, 2018 at 5:44 pm #24470
  
  Rahim
  
  beside the heart button.
  
  Both of them.
  
  Kind regards.
  
  Rahim Vaziri
  CEO & Founder at Look.ir
- September 6, 2018 at 6:12 pm #24471
  
  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
- September 6, 2018 at 6:20 pm #24472
  
  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
- September 6, 2018 at 9:30 pm #24473
  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
- September 7, 2018 at 12:50 am #24474
  
  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
- September 7, 2018 at 10:36 am #24483
  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
- September 7, 2018 at 6:30 pm #24490
  
  Rahim
  
  This reply has been marked as private.
  Rahim Vaziri
  CEO & Founder at Look.ir
- September 7, 2018 at 11:05 pm #24498
  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
- September 7, 2018 at 11:58 pm #24507
  
  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
- September 8, 2018 at 10:36 am #24518
  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
- September 8, 2018 at 1:13 pm #24527
  
  Rahim
  
  This reply has been marked as private.
  Rahim Vaziri
  CEO & Founder at Look.ir
- September 8, 2018 at 2:50 pm #24538
  
  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
- September 8, 2018 at 3:01 pm #24539
  
  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
- September 8, 2018 at 3:10 pm #24542
  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
- September 8, 2018 at 3:31 pm #24545
  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

Viewing 17 reply threads

Save

You must be logged in to reply to this topic.

Menu

Support Forum