Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1082773

    Hi guys, I reckon this might be an easy one for you.

    I’m trying to position the background image correctly so that it appears correctly responsively.

    Any idea how I can do this with quick CSS? I’ve built it all now so don’t want to switch to layerslider, there must be a simple way to assign how the background is postioned with CSS?

    Thanks

    #1083962

    Hey realisedesign,

    Try adding this css code in Quick CSS, located in Enfold > General Styling:

    #top.home #full_slider_1 .slide-1 img {
        top: 0;
        left: -340px !important;
    }

    just adjust the values as you see fit.

    Best regards,
    Nikko

    #1084042

    Thanks Nikko,

    Can I do that with a media query?

    #1084044

    HI Nikko,

    doesn’t seem to be working, this is the CSS path:

    html.html_stretched.responsive.av-preloader-enabled.av-default-lightbox.html_header_top.html_logo_left.html_main_nav_header.html_menu_right.html_custom.html_header_sticky.html_header_shrinking.html_header_transparency.html_header_glassy.html_mobile_menu_tablet.html_disabled.html_header_searchicon_disabled.html_content_align_center.html_header_unstick_top_disabled.html_header_stretch_disabled.html_entry_id_7714.html_av_admin_bar_active.av-no-preview.avia_desktop.js_active.avia_transform.avia_transform3d.avia-mozilla.avia-mozilla-65.avia-windows body#top.home.page-template-default.page.page-id-7714.logged-in.admin-bar.stretched.lato.open_sans.customize-support div#wrap_all div#main.all_colors div#full_slider_1.avia-fullwidth-slider.main_color.avia-shadow.avia-builder-el-0.el_before_av_section.avia-builder-el-first.container_wrap.fullsize

    Any ideas?

    #1084062

    Hi realisedesign,

    You can place it inside a media query like:

    @media only screen and (max-width:767px) {
      #top.home #full_slider_1 .slide-1 img {
        top: 0;
        left: -340px !important;
      }
    }

    Can you give a screenshot or mockup, how you like it to look on mobile? so maybe we can try to adjust the code for you.

    Best regards,
    Nikko

    #1091984

    Thanks Nikko.

    I’ll be able to position correctly or change the image if it doesn’t work.

    Just out of interest….Is there any way to scale them for mobile?

    Thanks,
    Sean

    #1092591

    Hi Sean,

    Our theme doesn’t offer that scaling but I think there are plugins that offer that.
    I found this plugin that I think you can try to use: https://wordpress.org/plugins/adaptive-images/ I haven’t tested it but I think it works based on some ratings if it doesn’t try to search for similar plugins.

    Best regards,
    Nikko

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

You must be logged in to reply to this topic.