Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #507979

    My assumption is this is “working as intended” and I need another way to go about this, and I’m hoping someone can give me suggestions… The item in question is the first Easy Slider at the top of the page – Basically I have a background assigned to a color section and Easy Slider set on top of it.

    In resolutions above 1600×900 the background image is aligned properly to the easy slider, but as soon as responsiveness takes over and Easy Slider starts to resize, the alignment falls out of whack.

    This looks especially bad on a mobile device.

    Any suggestions on how I can get this same look/feel regardless of the viewing resolution?

    Thanks so much for your assistance!

    • This topic was modified 2 years, 2 months ago by  empulse. Reason: Moved the development site to the live server, changed the private content link to reflect this

    Hi empulse!

    I see what your trying to do. Not sure if there is going to be an easy way of going about it.

    What I would probably end up doing is just use the fullwidth easy slider and set a background image to it so the slides display on top (there is an option for it).

    Best regards,

    • This reply was modified 2 years, 2 months ago by  Elliott.

    I’ll give this a shot. Thanks Elliott!


    I’ve changed to the fullwidth slider as recommended and I might be able to get this to work…. I have a few questions though.

    One, is there any way for me to move the border in around the image instead of around the full width container?

    Second, I had to use a separator / Whitespace at the top to get the slider down below the logo/nav bar. This looks fine in full screen but is awful when the resolution falls below the breakpoint. How do I go about hiding this separator in mobile view?

    Thanks for your assistance!

    • This reply was modified 2 years, 2 months ago by  empulse.

    Please note: Since this is the last item left to deal with, I’m in the process of moving this from our dev server to the live server… As such please try both URL’s in the private data box.

    Thanks again!



    Add this to your custom CSS.

    .avia-slideshow {
        border: 0px !important;
    .avia-fullwidth-slider, .avia-fullwidth-slider * {
        box-shadow: none !important;

    I did not see the whitespace though, did you remove it already?

    Best regards,


    Elliot, the whitespace only exists when the responsive breakpoint is reached. The logo graphic that we have stinks, but we dont have an original, so the whitespace is needed in fullscreen mode to offset the way the logo is built. See screenshot in private data.

    • This reply was modified 2 years, 2 months ago by  empulse.


    Try adding this to a codeblock element in the page.

    <style type = "text/css">
    @media screen and (max-width: 767px) { 
    #main > .main_color:nth-child(1) {
        display: none !important;

    Best regards,


    That fixes it.

    Thanks Elliott!



    Great, glad you got it fixed :-)

    Best regards,

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

The topic ‘[Responsiveness] Background image not properly resizing’ is closed to new replies.