Return to previous page

Responsive visualization error theme - by Webacto

This topic has 18 replies, 3 voices, and was last updated 8 years, 6 months ago ago by Eva Kemp

Webacto

Participant

October 8, 2015 at 15:49

Hello,

I’m cheching my web mobile version but in home page, my text banners doen’s responsive:

Please have a look:
https://www.google.com/webmasters/tools/mobile-friendly/?hl=it&url=www.lococostyle.com

How to solve it?

Can U have your specific support please?

thank you in advance

Please, contact administrator
for this information.

#92570 Copied Theme version: 2.2

17 Answers

Jack Richardson

Support staff

October 9, 2015 at 07:45

Hello,

Please show us a screenshot of the issue for better understanding.

Thank you.

Best regards,
Jack Richardson.

#92679 Copied

Webacto

Participant

October 9, 2015 at 09:30

Yeah,

1 problem:home text banner has been not displayed
http://lococostyle.com/mobileerror1.png

2 problem: testimonials blocks doesn’t have the same align and anyone is correctly centered
http://lococostyle.com/mobileerror2.png

3 problem: about page 4 bottom banners doesn’t show text and doesn’t have a responsive second image version (that I can upload?)
http://lococostyle.com/mobileerror3.png

How can I solve these 1,2,3 points?

if you need to check deeply the visualization, you can visualize these 3 links in mobile widht browser

1 problem:http://lococostyle.com/ (first 4 banners)

2 problem: http://lococostyle.com/
in “Our testimonials” section boxes (below)

3 problem: http://lococostyle.com/about/

waiting for your support

thanks

Please, contact administrator
for this information.

#92729 Copied
Eva Kemp

Support staff

October 9, 2015 at 10:05
Hello,

1./3. I’ve added this code in Custom CSS for mobile:
```
.banner .banner-content p {
    display: block;
}
.banner .banner-content {
   font-size: 3px;
}
.banner.valign-middle .banner-inner {
  height: 100%;
}
```
2. The issue with testimonials has been fixed.

Regards,
Eva Kemp.
#92733 Copied
Webacto

Participant

October 9, 2015 at 18:44

Hello,
a little better but I need some more help about these points, there are still visualization error. Look, it’s not a real responsive :/

I repass the all 3 same points

1. http://www.lococostyle.com/mobile-error1.png

Text in the first 4 banners is still too much big (I’ve tried to change it from css but appears in a bad way). Can you help me to solve text responsive adaptation in matter that all the text can be contained in the box (without stay up to the foto)?

I have also the first banner (that appear with “the emotion of” text) but its text not responsive and right-aligned. Can you pass me also this adjustment?
Theme doesn’t have this automatic responsive resize?

2. http://lococostyle.com/mobileerror2.png
Testimonials box uncorrect align no change. How can I obtain the all 4 testimonial orizontal centered in the mobile version? I need a more css class or something related to the theme? I need to arrenge a good alignement, please check deeply this point.

3. http://lococostyle.com/mobile-error3.png
Strange visualization!
How can I align the banner titles to the right side?
And how can I have a 100px higher banner? Creating a new ones for the mobile version? Or what?

Please, help me to complete a good responsive version at the best

thanks

#92934 Copied
Jack Richardson

Support staff

October 12, 2015 at 08:00
Hello,

1. Try to use this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.banner.hover-fade img {
  height: 200px;
}
.banner .banner-content p {
    width: 320px;
    font-size: 13px !important;
}
```
2. I’ve edited your code in custom.css file to:
```
@media (min-width: 1200px){.home #owl-testimonials .row:first-child{
    width: 900px;
    float: left;
}
.home #owl-testimonials .row:last-child{
    width: 300px;
    float: right;
}
#owl-testimonials .row:first-child .quote{
    width: 32.333333%;
}
#quote-15210{
width: 100%;
}

/* testimonials*/

blockquote.testimonials-text{
    height: 370px;
}}
```
Please check testimonials now.

3. Use this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.banner img {
    height: 200px;
}
```
Best regards,
Jack Richardson.
#93128 Copied
Webacto

Participant

October 14, 2015 at 13:51

Hello,

after your changes, unfortunatly, mobile version still have responsive problems.
You can check it with a browser window resize:
http://www.lococostyle.com

The 3 points are the same:

1. Text in the first 4 banners is still too much big and cover the photo right part.
How to solve?

2. About testimonials box uncorrect align, nothing change. Can we have a centered align for all 4 block?

3. A little better, but looks so weird and strecht. Look!
http://lococostyle.com/banner-about.png How to solve?

Can I copy these new mobile css in my custom.css stylesheet or they have to stay in the theme options?

Waiting your support

thanks

#93860 Copied
Eva Kemp

Support staff

October 14, 2015 at 15:50
Hello,

1. I’ve added this code in CSS block of Visual Composer editor on Home page http://storage9.static.itmages.com/i/15/1014/h_1444833726_6527032_eba0fed4f1.png :
```
@media (max-width: 480px) {
    .banner .banner-content p {
    width: 200px;
    font-size: 10px !important;
}}
```
Please check home page on mobile.

2. I’ve edited custom.css file and testimonials are shown this way now:
http://storage8.static.itmages.com/i/15/1014/h_1444833948_7644227_dd782a9d8c.png
Please check yourself.

3. I’ve added the code in CSS block in VC editor on About page:
http://storage4.static.itmages.com/i/15/1014/h_1444834236_5637922_847ed55b62.png
Check the page.

Regards,
Eva Kemp.
#93892 Copied
Webacto

Participant

October 14, 2015 at 16:44

Hello Eva,
cool!

1. In home page I only need a little align adjustment to let that text doesn’t cover photos and thats all.
In the first big banner, text should be align on right side, meanwhile in the other 4 banners, on the left one. These new css rules will be insert in the same CSS block of Visual Composer editor on Home page?

2. perfect!

3. a little better but still not respnsive, they not contain all the text.
http://lococostyle.com/banner-about2.png
Images still stretched (can I create or charge new ones for substitute it automatically in a mobile versione, as the header works) and text cover images. We need ones adjustes more, please. I propose:

I. It should be possible do not charge the 4 banner about images and redistribute the text in a centered way?

or, in alternative:

II.Can I realize the same banner with an other visual composer tool that automatically adapt its content?

Waiting for you, thanks

A general infos:
can I copy these mobile css otuside of theme editor in my custom.css?
at the follow update, I will lost also this mobile customization?

#93916 Copied
Eva Kemp

Support staff

October 15, 2015 at 09:17
Hello,

1. Add this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.banner.big-banner .banner-content p {
    text-align: right;
    margin-left: 20%;
    width: 300px;
}
.banner.four-banners a {
    margin-left: 17% !important;
}
.banner.four-banners .banner-content p {
    margin-left: -10% !important;
}
```
3. As I see banners on About page are shown fine:
http://storage6.static.itmages.com/i/15/1015/h_1444896889_2172966_75e430f13e.png

Try to check on mobile device.

Keep your style changes in Theme Options > Custom CSS. Don’t duplicate the code in different css files, because when you ask for help we’re confused what file to edit and where exactly all changes take effect from.
So add style code only to one place.

Thank you.

Regards,
Eva Kemp.
#94064 Copied
Webacto

Participant

October 15, 2015 at 14:26

Hello,

thank you for the support and the general information about how to construct the post.

1. Perfect!

3. Banners are ok, but I need do not visualize their images streched. Can I have a mobile css rule for do not display them in mobile version?

#94202 Copied

Webacto

Participant

October 15, 2015 at 14:37

3. Sorry but I have a different mobile display that show text cutted on the right side.
http://www.lococostyle.com/bannerdisplayerror.png

Can I have a css mobile rule for control (reducing) these banner width text?
Something similar to your home banner solution.

thank you in advance

#94205 Copied

Webacto

Participant

October 15, 2015 at 14:55

3. I’ve just find a resposive text solutions in the banner options, this point now it’s ok.
I only need to correct the resize image that are (actually streched).

Main problem seems that size image correspond to size banner and I can’t control the responsive image resize, separeted to the banner layout one.

How can I solve?
Can I have a mobile css rule for do not display them in mobile version?

#94210 Copied

Eva Kemp

Support staff

October 15, 2015 at 15:08

Hello,

Do you want to hide banners for mobile on all pages?
Please confirm if I understood you correctly.

Regards,
Eva Kemp.

#94215 Copied

Webacto

Participant

October 15, 2015 at 16:16

Hello,
no, please, my request is different: I would like to hide the 4 about banner IMAGES (only the images) on mobile “about page” display for evitate to have to find a solution to their correct resize.

The ideal was display the same 4 about banners with images in desktop version, and without images in the mobile one.

I hope it will be posible and easy

thanks

#94231 Copied

Eva Kemp

Support staff

October 15, 2015 at 16:49

Hello,

I’ve added the code in CSS block of VC editor in About page:
http://storage9.static.itmages.com/i/15/1015/h_1444924121_7786111_e0dfef1821.png

Please check the page now.

Regards,
Eva Kemp.

#94240 Copied

Webacto

Participant

October 15, 2015 at 17:35

3. That’s it!
Really cool

thank you Eva

#94256 Copied

Eva Kemp

Support staff

October 15, 2015 at 17:38

Hello,

You’re welcome.

Regards,
Eva Kemp.

#94262 Copied
Viewing 18 results - 1 through 18 (of 18 total)