Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 30, 2019 at 7:33 pm #1105482
    Jodie595

    Hi i love the enfold theme and have purchased it, done setting up my website which looks beautiful so far but only on desktop as the website is not mobile friendly or should i say some pages and mainly the images are not responsive at all. Please help me urgently to fix this. Tell me how or what to do to correct this. Thanks and reply asap please.

    June 1, 2019 at 8:30 am #1106009
    Rikard

    Hey Jodie595,

    I can’t see anything on your site which is not responsive, could you try to explain the problem a bit further please?

    Best regards,
    Rikard

    June 1, 2019 at 9:37 am #1106021
    Jodie595

    Try visiting the website on a mobile phone and you will see what i am talking about. The image is not resizing, and the menu displays very funny. You can even try resizing it on chrome browser too and you will still notice the problem i believe. So i would like to know if i need to edit/add some css code or something. Please help me asap. Thanks

    June 2, 2019 at 11:05 am #1106320
    Victoria

    Hi Jodie595,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
    .avia-fullscreen-slider .avia-slideshow>ul>li {
      width: 100%;
      background-size: contain;
      background-repeat: no-repeat;
  }
  .avia-fullscreen-slider .avia-slideshow {
   height: 250px !important;
  }
  .avia-fullscreen-slider .avia-slideshow-inner {
      width: 100%;
      height: 250px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 2, 2019 at 7:41 pm #1106429
    Jodie595

    Hi thanks, Added the codes and it worked but only on the header image, the image with the about link on the home pages still displays funny as well as the menu, please see the screenshots and advise how to fix this please.

    See link to screenshots, Thanks

    June 3, 2019 at 7:40 am #1106587
    Ismael

    Hi,

    Thank you for the update.

    It may not be what you’re expecting, but that is how the cell’s background image is supposed to resize on mobile view. One workaround is to hide those particular grid cells on mobile view and replace them with a different element. You can use the elements’ Screen Options panel to toggle their visibility for different screen sizes.

    Or use this css code to adjust the position of the image inside the background positioning area.

    @media only screen and (max-width: 767px) {
#hello .flex_cell.no_margin.av_one_half.avia-builder-el-12.el_after_av_cell_one_half.avia-builder-el-last.avia-full-stretch.av-zero-padding {
    background-position: 70% 0 !important;
}
}

    You may need to apply a Custom CSS Class to that particular element and use that instead of the default css selector above.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.