fourvibes

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

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

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

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

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

[fourvibes]

This reply has been marked as private.

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

[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 another doubt, how can I know which are the best dimensions for the main banner image?

Thanks you

[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

[Author]

Posts