Enfold not rendering correctly in Mobile view

Hey Adam,

I am not seeing the slider, icons are meant to look this way on mobile.
If you want we could try to adjust that. Could you please point us to a page with a slider and specify the elements, where you want to adjust paddings.

Best regards,
Victoria

Hi,

1. The caption on slider is still align left however since the screen is narrow, the text is spread across the whole image, we can adjust this however with the length of the caption in your slider I don’t advise it.

2. The padding is big or small depending on what you set on the Section’s Section Padding.

3. Try adding this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:767px) {
  .responsive #top #service .flex_column.av_one_half {
    width: 50%;
  }
}

Hope this helps :)

Best regards,
Nikko

Hi,

2. Try adding this css code in Quick CSS:

@media only screen and (max-width:767px) {
  .home .av-slideshow-caption.caption_left {
    max-width: 65%;
  }

  .home .av-slideshow-caption.caption_left p {
    margin: 0 0 10px;
  }

  .home .av-slideshow-caption.caption_left a.avia-slideshow-button {
    margin-top: 0 !important;
  }
}

3. Add this css code in Quick CSS:

@media only screen and (max-width:767px) {
  .avia-section-huge .content, 
  .avia-section-default .content {
    padding: 50px 0;
  }
}

Hope this helps :)

Best regards,
Nikko

Hi,

Try adding this css code:

@media only screen and (max-width:767px) {
  .home .slideshow_inner_caption {
    max-width: 65% !important;
  }
}

Hope this helps. Also just a tip, you would notice all the codes I gave have this at the beginning:

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

}

You can just have one of that and whatever code I gave just put it inside it. :)

Best regards,
Nikko

Hi Adam,

Can you try to give us temporary admin access? so we can test the code.

Best regards,
Nikko

Hi,

You can try this one:

1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
   ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

Best regards,
Nikko

Hi,

Thanks for giving us access, you can check it now. I have added this css code in Quick CSS:

@media only screen and (max-width:767px) {
  .home .av-slideshow-caption.caption_left {
    max-width: 65%;
  }

  #top.home .av-slideshow-caption.caption_left h2.avia-caption-title {
    font-size: 17px !important;
  }

  .home .av-slideshow-caption.caption_left p {
    margin: 0 0 10px;
  }

  .home .av-slideshow-caption.caption_left a.avia-slideshow-button {
    margin-top: 0 !important;
  }
}

Let us know your feedback.

Best regards,
Nikko

Hi,

I have checked it and it looks good on my end. I have posted the link I used to check and the screenshot in private content.

Best regards,
Nikko

Hi Adam,

Please clear cache on your devices or test with another device and let us know how that went.
http://refreshyourcache.com/en/safari-mobile/
https://www.wondershare.com/mobile-phone/how-to-clear-cache-on-android-devices.html

If you need further assistance please let us know.
Best regards,
Victoria

Hi Adam,

The code I gave you works only on mobiles, it does not affect the desktop version at all. The code I gave you fixes the issue with the mobile logo and search overlapping. Alos I noticed that in portrait mode on an iPad the menu overlaps the logo too. Do you need a fix for that?
As for the original request, there too much text and the slider does not get tall enough to accommodate it. So I would suggest removing the slider for the smallest screen, having the image and the text below it.

Let me know what you think.
Best regards,
Victoria