Tagged: ,

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • August 22, 2017 at 2:10 am #842281
    dbdbdb

    I’m new to Enfold and surprised to find that the full screen slider I used on the home page, and the color section backgrounds on interior pages aren’t responsive. Is there a setting or technique I’m not aware of, or should I just hack away at it using CSS. Thanks!

    August 22, 2017 at 4:25 am #842284
    chrisbryant

    For the color section background image.
    Go to Section Background tab (of the color section).
    Then scroll down to where you set the Background Repeat value.
    Set it to “Stretch To Fit“.

    Haven’t played with the fs slider yet.

    • This reply was modified 6 years, 8 months ago by chrisbryant.
    August 22, 2017 at 3:47 pm #842611
    dbdbdb

    Thank you for your response. Yes, all color section bgs are set to ‘stretch to fit,’ but still not reponsive.

    August 24, 2017 at 5:06 pm #843587
    Nikko

    Hi,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  #av_section_1, 
  #av_section_1 .container {
    height: 60vw;
  }

  #av_section_1 main.content.av-content-full {
    padding: 0;
  }

  #av_section_1 .hr-invisible {
    display: none;
  }
}

    Let us know if this helps :)

    Best regards,
    Nikko

    August 24, 2017 at 6:38 pm #843651
    dbdbdb

    Thanks Nikko. Your code makes the bg responsive below 767px, which is great. I changed it to 1300px and 50vm and now it’s responsive all the way down. But what troubles me is that Enfold seems to NOT be responsive out of the box. This is supposed to be a ‘mobile ready’ theme, so I hoped to avoid hacking the styles to make it work. If that’s what’s necessary, it’s very disappointing. But you were terrific. Thanks!

    August 24, 2017 at 8:48 pm #843687
    Nikko

    Hi,

    Enfold is responsive and the thing about fullscreen slider is it covers the whole height and width of the monitor, Stretch to fit is a setting where the image is set to fully cover the whole height and width while maintaining the aspect ratio of the image. What the code I gave you does is to force the fullscreen slider to set the height of the container based on the height of the image instead of the whole screen. You will notice in the code that there’s no adjustment to the image (img).

    Best regards,
    Nikko

    March 29, 2019 at 1:07 pm #1084563
    vnvo

    Could you please help me ! I tried this code and it’s a disaster on my home page ! I have tried to delete it and the disaster is still there ! Could you help me please ! My goal was the same to make the color section and my fullscreen slider on the home page responsive for smartphone ! And it’s not the case … how to proceed please ? http://www.dognannyriviera.com

    March 29, 2019 at 1:15 pm #1084564
    vnvo

    It’s alright the disaster is fixed… it was just a matter of time, the update tooks 10 min before going back to normal… But my problem is not fixed. The code you gave us makes problem on my home page (texts and images appears in disorder) : The fullscreen slider doesn’t change (still not responsive) only 1 color section becomes responsive (on the “prices page”) the ones of “about” and “services” pages don’t change.
    Thank you in advance for your help.

    March 29, 2019 at 10:28 pm #1084739
    vnvo

    I have tried again your code : it works for color background section
    It doesn’t work for the full screen slider on my home page. Could you please help me ?
    Other problem to take in consideration : When I use your code, it create a disorder on my home page, I think it doesn’t fit with animations …
    Could you please help me to fix the problem. I had to delete the code for the moment in order visitors of my website can’t see the mess.

    I am waiting for your help.
    thank you in advance.

    March 30, 2019 at 3:57 pm #1084885
    Nikko

    Hi vnvo,

    The code I mentioned above was specific for dbdbdb’s website and would not work on other sites except if layouts are the same.
    I have added this css code in your Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:479px) {
  #fullscreen_slider_1, #fullscreen_slider_1 > .avia-slide-slider {
    max-height: 40vh;
  }
}

    You may need to clear the browser cache.
    Let us know if you need further assistance.

    Best regards,
    Nikko

    March 30, 2019 at 8:01 pm #1084958
    vnvo

    Thank you so muh Nikko, you’re so efficient ! It’s perfect ! The slider works perfectly on my home page. For the color section I get ti fix the one of “about” and “services” pages but the one of “prices” page I didn’t get to fix it. Could you please help me ? It is just not responsive on smartphone.

    Thank you in advance

    March 31, 2019 at 11:19 am #1085037
    Nikko

    Hi vnvo,

    We’re happy to hear that :)
    I have changed the code I previously gave to this:

    @media only screen and (max-width:479px) {
  #fullscreen_slider_1, #fullscreen_slider_1 > .avia-slide-slider {
    max-height: 40vh;
  }

  .page-id-2933 #av_section_1.av-minimum-height-75 .container {
    max-height: 26vh;
  }
}

    I have also disabled CSS file merging and compression since it’s just fetching the old css. You can enable it after few days, just to get rid of the cached css.

    Best regards,
    Nikko

    April 14, 2019 at 10:25 am #1090562
    vnvo

    Hi Nikko,
    I’m recontacting you because finally using your code to do the same on the “about” and “services” pages doesn’t work.
    I have tried to copy/paste this part :
    .page-id-2933 #av_section_1.av-minimum-height-75 .container {
    max-height: 26vh;
    }

    changing the id page only ; it has worked for the “tarifs” page (the french version of the “prices” page) but not for “about” and “services”
    Could you please help me ?

    April 16, 2019 at 12:08 pm #1091394
    Nikko

    Hi vnvo,

    Try removing .page-id-2933 from the last code I gave:

    .page-id-2933 #av_section_1.av-minimum-height-75 .container {
    max-height: 26vh;
}

    The page id limits it to specific pages only.

    Best regards,
    Nikko

    April 22, 2019 at 10:28 pm #1093415
    vnvo

    Yes it works ! Thanks a lot Nikko !

    April 23, 2019 at 9:08 am #1093577
    Rikard

    Hi vnvo,

    Great, I’m glad that Nikko could help you out :-)

    Best regards,
    Rikard

    June 8, 2019 at 4:58 pm #1108457
    vnvo

    Dear Nikko,
    I’m getting back to still because of the responsiveness of Enfold.

    Few months ago we had fixed the problem about the full screen slider responsiveness on the main page and also the responsiveness of image sections on other page.

    Actually the problem is fixed on smartphones but not for tablets, and according google analytics I have few visitors using tablet, so could we fix this problem also for these visitors please?

    Thank you so much in advance :)

    June 9, 2019 at 8:33 pm #1108685
    Victoria

    Hi vnvo,

    Could you please give us a link to your website, we need more context to be able to help you.

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    June 10, 2019 at 11:43 am #1108787
    vnvo

    Hi Victoria,

    Thank you for your reply .
    Actually I cannot attach any screenshot here … ?
    The problem is : that for example on a ipad, the full screen slider in the home page is really too big (not responsive) ; and on the page about and prices, the background sections at the top of the page (image of a dog in a luxury car ; image of 2 dogs drinking a beer) are too big (not responsive) also.

    My goal is ,as Enfold theme is sold as a responsive theme, to get a website full responsive using a laptop, a smartphone or a tablet.

    Please find in the private content the login and password of my website.

    Thank you very much for your help in advance Victoria.

    Charlene

    June 11, 2019 at 4:15 pm #1109204
    Victoria

    Hi Charlene,

    Please upload screenshots to a service like https://imgur.com/upload and give us the links here so that we can understand the issue better.

    Best regards,
    Victoria

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