Search Results for 'css'

[Harry]

1. This code will not work with new version of Gecko

2. You can try this css

@media only screen and (max-width: 1100px) {

.jas-menu > li:not(:first-child) { margin-left: 12px; }

}

3. You can follow this screen

https://monosnap.com/file/f8WUMxQmcBunCnlyZRM6in3ouygY6T#

4. You need go to WooCommerce > Settings > Products > Display > Product Image > And change all dimension to square to match with your original image. after that go to Tools > Regenerate Thumb

5. Sorry i still don’t understand your issue.

 

 

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

[Harry]

Hi,

I checked your site on mobile and saw the banner work.

You can change css to

@media only screen and (max-width: 568px) {

.home .vc_row-o-full-height { min-height: inherit !important; padding: 50px 0 70px !important;}

.vc_row-o-full-height .pa-center .fs__14 span { font-size: 14pt !important;}

.vc_row-o-full-height .pa-center h3.fs__50 { font-size: 10pt !important;}

.pa-center h2, .pa-center h3 { margin: 0;}

}

The image banner on mobile same effect on desktop, it will resize as screen resolution, we can’t care 100% for all device resolution. We only make it better.

Best regards

 

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

[fourvibes]

1. I dont’t know why the CSS code changed beacuse I never do this action. What I was doing is changing the image inside row settings > general. Now I place the image, as you said, in design option and disabled paralax option.

1.1 Image it’s still cutted for both sides (left and right)
1.2 Now, when loading main image it makes a little “zoom” and then come to normal size. (link of the video: https://www.youtube.com/watch?v=RT5skD9QxTo)

2. Before trying more things, I followed all the steps you said and mobile version it’s still problematic, no good image escalation and text goes out of the screen.

I’m going to upload my setting so you can see them.

Sorry for the poblems and I hope it can be solved.

Attachments:

You must be logged in to view attached files.

[Faizan]

This reply has been marked as private.

[Harry]

This reply has been marked as private.

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

[Harry]

Sorry i can’t view your site back end, it strange.

1. Please don’t delete the row wrapper main banner when you change image. https://monosnap.com/file/BoIpP2inIrNe4WQWRqQ1LNOWzvwcz8# That will change class of wrapper div, so the css code i sent you can’t apply.

Sorry for suggest wrong dimension ( the size 1950 x 814 work well if you disable parallax effect and upload image via Design Option tab)

http://take.ms/DEN69

https://monosnap.com/file/zBbSPWpHbg3z9CvMOlrDZ3cUHGHBYB#

The parallax effect will cut off the top of image,

 

2 .The code now change to for mobile now is

@media only screen and (max-width: 568px) {

.vc_custom_1495952553827 { min-height: inherit !important; padding: 80px 0 100px !important;}

}

 

 

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

[fourvibes]

Dear Haryy, the CSS code have no effect and issue it’s still there.

I think it may be because another CSS code we have, or any other idea?

CSS CODE LIST WE HAVE:
.header-2 .jas-branding { padding: 0px 0;
}

.header-2 .header__mid [class*=”jas-col-“] {
-webkit-justify-content: center;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
text-align: center;
}
.header-2 .header__mid #jas-right-menu {
display: table;
margin: auto;
}

.header-sticky .header__mid .jas-branding { padding: 0; }

.product-image:hover > .db::before { opacity: 0;}

.page-head { display: none;}

.footer__top { padding: 20px 0;}
.footer__bottom { padding: 20px 0;}

.product-image:hover > .db::before { opacity: 0;}
.product-image:hover .product-button > * { transform: scale(0); display: none;}

.product-image:hover .product-image-flip .back {opacity: 1;}

.product-image .product-image-flip:hover .back img {
transform: none;
}

.nombresconocenos{
color: white;}

.product .badge {
display: none;}

.social-share { display: none; }

.p-video { display: none; }

.jas-menu > li > a { font-size: 20px;}

@media only screen and (max-width: 736px) { .jas-gmap {max-width: 100%;} }

@media only screen and (max-width: 568px) {

.vc_custom_1495880494649 { min-height: inherit !important; padding: 80px 0 100px !important;}

}

[Harry]

Sorry for late reply.

You can add custom css in JanStudio > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 568px) {

.vc_custom_1495880494649 { min-height: inherit !important; padding: 80px 0 100px !important;}

}

The best dimension for main banner is : 1920 x 1080

Best regards

 

• This reply was modified 7 years, 9 months ago by Harry.

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

[Harry]

You can change like this by add custom css

@media only screen and (max-width: 414px) {
.badge span.new { top: 0; left :0; right: auto;}

.badge span.onsale { top: auto; right: 0; bottom: 0; left: auto;}

.product-image .yith-wcwl-add-to-wishlist {top: 30px;}

.btn-quickview { top: 65px;}
}

Regards

 

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

[Harry]

Hi,

1. I fixed issue with error message on your site.

2. To fix issue with swatches not circle you can upload thumbnail as square or add custom css in JanStudio > Theme Option > General Layout > Custom CSS

#pa_color.swatch li span {width: 24px;}

Best regards

 

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