Enfold Medical - Responsive Not Working Well - Support | Kriesi.at

Tagged: ENFOLD MEDICAL, responsive

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
May 19, 2017 at 8:52 pm #796752

hobeja7
Participant

Hi,
I recently purchased your theme. I’m used to Visual Composer and I must say I find the Avia Framework really awesome.
I’d like to request your help with the responsive of the Medical Demo.

I have already tried using the custom code provided in two topics.

The code in the topic below leaves a long space between the separator line and the slider and the first service box, so it doesn’t work well for me.
https://kriesi.at/support/topic/enfold-medical-demo-is-not-responsive/

The code in the topic below doesn’t leave a long space with the separator line and it looks better.

Enfold Medical Demo

Even with the code in the second topic I still find that the slider image is being covered a lot by the menu section and that the typography is too big and goes across all over the slide image. Could you limit it to only 3/4 of the width and have a smaller typography?

Also neither of the codes work for the portrait use of an iPad (768×1024).
In an iPad Pro (1024×1366) it doesn’t look so bad, yet the last line of text is still too close to the service box.

I’d really appreciate your help with this.
Thank you!

May 19, 2017 at 8:59 pm #796762

hobeja7
Participant

I forgot to mention also that the buttons in the slider are not showing. Most likely they’re being covered.

Thanks!

May 20, 2017 at 4:36 pm #797040
Mike
Moderator
Hi,
Can you see if the flex column has a top padding set to -160px?

To address the slider, Try this code in the General Styling > Quick CSS field:
```
@media only screen and (max-width: 767px){
#top .avia-slideshow-button {
    margin-top: -20px!important; 
}
}
@media only screen and (max-width: 1020px) and (min-width: 767px) { 
.avia-caption-title {font-size: 22px !important; }
.avia-caption-content {font-size: 14px !important; }
.slideshow_caption {padding: 10px !important; }
.slideshow_inner_caption {width: 150% !important; }
}

@media only screen and (min-width: 1021px) { 
.slideshow_caption {padding: 10px !important; }
.slideshow_inner_caption {width: 150% !important; }
}
```
Please clear your cache :)

Best regards,
Mike
May 20, 2017 at 5:58 pm #797066
hobeja7
Participant
Thanks Mike.

The padding is set to 40 40 40 40, I left it as default.
The margin top is set to -200 by default. I had changed that one to -160 to test some settings. Yet, is back to -200.
Below the screenshots

I appreciate the code you made. Yet, the code didn’t seem to fix the slider. The buttons still get covered.
The text is a bit better, yet it still goes across all the screen, and when it gets on top of the image, it is hard to read.
The iPad and iPad Pro also broke with that code.

If I remove the code I have for the Flex, that I copy pasted from the second topic I posted, the slider image looks even smaller.

I will attach preview images of how it looks as private content.
Feel free to access the website and test. I posted that info as private in the first post I made.

Thanks.
- This reply was modified 7 years, 6 months ago by hobeja7.
May 20, 2017 at 6:48 pm #797076

Mike
Moderator

Hi,
The margin top set to -200 is what is making that bottom section riding up and over the slider.
The tablet views show the changed code, but not the phone view.
It being hard to read, may have to do with too much text for the small screens?
How do you feel about changing the size of the slider?

Best regards,
Mike

May 22, 2017 at 8:04 pm #797887
hobeja7
Participant
The margin top it has right now is the default value the demo had right out the box. As long as those 3 services boxes stay in above the fold on a 1920×1080 screen I’m good. I believe we have at least 30-40 pixels we can use for height before we lose the boxes.

I believe the text on the slider gets hard to read because it goes across all the image. This also happens in the default demo.

Is there a way to limit the slider text on the mobile / responsive view to appear only in 50% of the screen, left side for the first image and right side for the second image?

Please feel free to make any adjustments to fix the buttons and slider image size, as long as it doesn’t move the service boxes below the fold of the page on a 1920×1080 resolution.

Thanks for your support Mike.
- This reply was modified 7 years, 5 months ago by hobeja7.
May 25, 2017 at 3:17 am #799316

Mike
Moderator

Hi,
It looks like the mobile, laptop & desktop view of the slider and buttons, is good now.
As for limiting the width of the slider text to 50% in the mobile view, it can be done but it would make the size of the text very small so that the buttons stayed visible. Do you want to proceed anyways?

Best regards,
Mike

May 25, 2017 at 3:43 am #799322
Ismael
Moderator
Hi,

Thank you for the info.

Please try the following css codes.
```
@media only screen and (max-width: 479px) {
  .responsive #top .avia-slideshow-inner li:nth-child(odd) .slideshow_caption {
      left: 0;
      width: 70%;
  }

  .responsive #top .avia-slideshow-inner li:nth-child(even) .slideshow_caption {
      right: 0;
      width: 70%;
  }

  .responsive #top .slideshow_caption h2 {
    font-size: 15px !important;
  }

  .responsive #top .avia-slideshow-inner, .responsive #top .avia-slideshow-inner img {
    height: 400px !important;
  }

  .responsive #top .avia-slideshow-inner img {
    min-width: 840px !important;
  }

  .responsive #top .avia-slideshow-inner li:nth-child(even) img {
    margin-left: 100px !important;
  }
}
```
Best regards,
Ismael
May 25, 2017 at 3:45 am #799323

hobeja7
Participant

Awesome! Thanks Mike. Seems like it’s working just fine for the iPhone 6S, iPad and iPad Pro.
Would you be able to help with the iPhone 6 and iPhone 5 responsive buttons?

Let’s try 65% of the left side in the first slider and 75% of the right side in the second slider and see how it looks.

May 25, 2017 at 3:51 am #799327

hobeja7
Participant

Oh, Thanks Ismael. Sorry, I was writing when you posted your answer. Now that it refreshed it showed it.
Mike was coding in my website. He has code there.
Should I remove his code and paste yours?

May 25, 2017 at 7:25 am #799392

Rikard
Keymaster

Hi,

Is Mike’s code not working? If so you could try removing it and try Ismaels code instead.

Best regards,
Rikard

May 25, 2017 at 5:18 pm #799655

hobeja7
Participant

Thanks Rikard.

I tested out Ismael’s code and while it does help to show the buttons in an iPhone 5 and 6 – The slider image doesn’t look good. It’s being scaled up but constrain proportions are not being kept. It doesn’t work with an iPad, iPad pro and iPhone 6S.

Mike’s code does work for the iPad, iPad Pro and iPhone 6S.
Mike was working in the slider text to be shown in only 60% of the left side, for the first slider image, and 75% of the right side for the second slider image. Also in the iPhone 5 and 6 responsive buttons.

I’ll keep using Mike’s code.
I appreciate everyone’s help.

May 26, 2017 at 4:10 am #799957

Mike
Moderator

Hi,
Sorry I’m not able to “the slider text to be shown in only 60% of the left side, for the first slider image, and 75% of the right side for the second slider image.”
Also, limiting the width of the slider text in the mobile view, so that the buttons stayed visible, would make the size of the text very small and hard to read. Have you considered having less text?

Best regards,
Mike

May 27, 2017 at 12:50 am #800466

hobeja7
Participant

I’m actually afraid that the final copy for the website might require more text than that.

Well, at least you helped to make it work for the iPhone 6S, iPad and iPad Pro.

Any help you could give to make the buttons show on an iPhone 5 and 6?

May 27, 2017 at 11:02 pm #800653
Mike
Moderator
Hi,
you could try this that reduces the padding around the buttons on mobile so they don’t drop down below the frame:
```
@media only screen and (max-width: 767px) { 
#top .avia-slideshow-button {padding: 5px 6px!important; }}
```
Best regards,
Mike
June 24, 2017 at 1:50 am #812360
hobeja7
Participant
Hey Mike,

I realized that I will need to add extra code to the theme to add other functions, so I used the theme child provided in the documentation. = http://kriesi.at/documentation/enfold/using-a-child-theme/

However, when I activated the child theme, and imported the parent settings, not everything was imported. Now there’s this green old font and green buttons all over the website.

Any way to fix that? I provided the link to the website as private content.
- This reply was modified 7 years, 4 months ago by hobeja7.
June 25, 2017 at 12:13 am #812569

Mike
Moderator

Hi,
If you had CSS code in General Styling > Quick CSS field please copy that to the child theme.

Best regards,
Mike

June 27, 2017 at 5:25 pm #813523

hobeja7
Participant

Thanks Mike.

I only had the scripts you provided in this topic in the quick CSS field.

I wasn’t doing any font/colors styling there.

June 28, 2017 at 3:42 am #813667

hobeja7
Participant

I have tried deleting the child, and adding it again.
I have exported manually a file from the parent, and imported that file to the child, and it still doesn’t work.

The green buttons and fonts that are currently showing in the website are from the Enfold theme, before you do any demo import.

June 29, 2017 at 3:00 am #814182

Mike
Moderator

Hi,
I changed the color in the Advanced Styling, and it seems to have fixed it. Very odd that it did that.
Please clear your cache :)

Best regards,
Mike

July 1, 2017 at 4:20 am #815218

hobeja7
Participant

Awesome!

Thanks for all your help Mike!
Outstanding customer service / tech support :)

July 1, 2017 at 7:27 am #815276

Ismael
Moderator

Hi,

Great! Glad we could help. :)

Best regards,
Ismael
Author

Posts