Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 25, 2019 at 5:40 pm #1082773
    realisedesign

    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

    March 28, 2019 at 9:01 am #1083962
    Nikko

    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

    March 28, 2019 at 11:32 am #1084042
    realisedesign

    Thanks Nikko,

    Can I do that with a media query?

    March 28, 2019 at 11:39 am #1084044
    realisedesign

    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?

    March 28, 2019 at 12:24 pm #1084062
    Nikko

    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

    April 17, 2019 at 12:58 pm #1091984
    realisedesign

    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

    April 19, 2019 at 6:38 am #1092591
    Nikko

    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

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