Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 23, 2015 at 4:49 pm #507979
    empulse

    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 9 years, 2 months ago by empulse. Reason: Moved the development site to the live server, changed the private content link to reflect this
    September 23, 2015 at 5:16 pm #507995
    Elliott

    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,
    Elliott

    • This reply was modified 9 years, 2 months ago by Elliott.
    September 23, 2015 at 5:59 pm #508026
    empulse

    I’ll give this a shot. Thanks Elliott!

    September 23, 2015 at 6:10 pm #508029
    empulse

    Elliot,
    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 9 years, 2 months ago by empulse.
    September 23, 2015 at 7:26 pm #508059
    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!

    September 24, 2015 at 4:34 pm #508594
    Elliott

    Hey!

    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,
    Elliott

    September 24, 2015 at 4:57 pm #508613
    empulse

    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 9 years, 2 months ago by empulse.
    September 25, 2015 at 5:57 pm #509218
    Elliott

    Hey!

    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;
}
}
</style>

    Best regards,
    Elliott

    September 25, 2015 at 7:25 pm #509248
    empulse

    That fixes it.

    Thanks Elliott!

    September 26, 2015 at 7:23 am #509378
    Rikard

    Hi,

    Great, glad you got it fixed :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘[Responsiveness] Background image not properly resizing’ is closed to new replies.