Mobile Version

[fourvibes]

Dear JanStudio, we noticed that the main picture in mobile version of our website doesn’t fit ( picture is not escalated and text is out of the screen)

Is there a posibility of fixing that?

PS: I upload a picture so you can understand.

https://fourvibes.com/

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

The issue because you set first row that contain banner is full-height and background is cover so the ratio between width and height on mobile (w < h ) different with on desktop (w > h).

Best regards

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

[fourvibes]

Thank you Harry,

I’m trying to modify it but I dont know how, the things I’m doing don’t solve it. Could you please give me some steps to change it?

Have a nice day,

FourVibes

[fourvibes]

And another doubt, how can I know which are the best dimensions for the main banner image?

Thanks you

[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 6 years, 11 months ago by Harry.

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;}

}

[fourvibes]

And also, when I upload the banner image in the 1920 x 1080 dimensions, the image I see it not all of it.

I upload the original image and the same one when on its as banner (same dimensions)

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Sorry for the image banner, you can try 1950 x 814.

2. I see class name of row contain the banner change.

so the code change to

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

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

}

I try to edit your site but can’t access your admin.

regards

 

 

 

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

[fourvibes]

This reply has been marked as private.

[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.

[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

[Harry]

We are sorry because the issue not resolve.

1. On my screen 1920 x 1080 the banner display good, it hard to fix the issue because it defend on screen  resolution of user computer.

The issue image zoom because the first it load original image, after loaded the image reduce to fit with your screen. When the height meet or the width meet screen resolution other dimension will cut off ( left, right of banner with your case ).

2. Can you try this code for mobile, hope this time it done

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

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

}

 

Best regards

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

[fourvibes]

Morning Harry

1. I understand but it’s ugly this effect, and it happens in phone and my computer.

2- The code doesn’t have effect.

I don’t know how many options I have changed so maybe it’s better to delete row and start from 0 to create image banner. A video tutorial with all the steps and options that have to be activated would be nice. (options of the image I sent)

Or If you have any other solution, let me know please,

thanks

[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]

Dear Harry,

1. image size is solved on desktop and phone but still have problems with the sentence in the banner, they are out of the screen:

“Siente las vibraciones del mediterraneo” (see in the image).

2. Another different doubt: Theres is on the home page a text

” Diseños inspirados en la libertad que proporciona vivir junto al mar, rodeados de una imponente naturaleza, alumbrados por la mágica luz de los atardeceres y acariciados por la cálida brisa que solo el espíritu Mediterráneo puede dar. Nos basamos en los 4 pilares que nos hacen vibrar.”

which fits perfectly on the web and looks awesome but we would like to know if its posible to reduce font size for mobile display because if not it does take a lot of space in the screen.

Thanks again Harry,

FV

Attachments:

You must be logged in to view attached files.

[fourvibes]

I think it’s easier showing you what we want. The uploaded image would be a perfect example ( ofc we would change it for one of our images) beacuse text fits perfectly in phone, image size is perfect and in computer it perfect too.

It was on the demo, but beacuse we changed setting I d’ont remember anymore that default setting that were in the demo.

Attachments:

You must be logged in to view attached files.

[Harry]

Dear FV,

2. For the text code in main banner you can follow our code

<div class="pr">
<div class="pa-center tc">
<h4 class="tu fs__14 cw fwb mg__0"><a class="cw" href="/gecko/fashion/shop">Street Style</a></h4>
<h3 class="tu fs__50 fwb"><a class="cw" href="/gecko/fashion/shop">Daily outfit collection</a></h3>
<a class="cw tu button-o-w" href="/gecko/fashion/shop">VIEW COLLECTION</a>
</div>
</div>

The text will fit with mobile if length of text like our demo.

2. You can add custom css in Theme Option

@media only screen and (max-width: 568px) {
.our-store {padding: 20px;}
.our-store p:first-child { letter-spacing: 0; line-height: 22px;}
}

Best regards

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

[fourvibes]

Everything solved and working perfectly but the only thing that keeps is the image size on phone. Nos it’e extremely little for being a proper banner picutre in phone:

We have this image size on phone (first picture)

We would like to have this image size on phones(second picture)

Attachments:

You must be logged in to view attached files.

[Harry]

If you want the banner like our demo your image will be cut off, and everything i try to fix your issue on mobile will lose.

You only need to remove code i suggest you

@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;}

}

Regards

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

[fourvibes]

Thanks a lot Harry, I understand. It’s just that we want to try some images and decide if keep the code or not depending on how does the image look better!

We appreciate all your effort and already rated you 5/5

Thanks and have good evening

[Harry]

Yes, we always want our customers happy :).

That is big award for us.

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

[Author]

Posts