Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #866031

    Hello,
    I’m trying to change my background image for the landing page when a mobile device visits. Before trying to get it to use a different image, I’m just trying to see if it can even remove the background image. I’ve tried adding this code to the Quick CSS, but it does not change anything:

    @media only screen and (max-width: 480px) {
    .home div#av_section_1 { background: none !important; }}

    I figured changing it to a new image would be more complex so started with this code. It’s the landing page image in the back.

    Any thoughts?

    #866038

    Hi Zuluster,

    If the image you’re attempting to remove is done using the inline styles, I believe you’ll need to use

    @media only screen and (max-width: 480px) {
    	.home div#av_section_1 { 
    		background-image: none !important; 
    	}
    }

    Notice: background-image vs background property.

    #866044

    Thanks for the response, but that did not work. My background image is set using Pages > Landing Page > Editing the Color Section of the Landing Page > Insert Image. It says Insert Custom Background Image right next to it.

    Screenshot of background location in editor

    • This reply was modified 6 years, 5 months ago by Zuluster.
    #866051

    Hey Zuluster,

    When I tested the code I provided (above) I tested it using a Page > Color Section > Background Image – just as you’ve described.

    Have you checked to see what’s happening using the Inspector in Chrome, or Firebug?
    Or, perhaps something is taking precedence over your background-image selector in the CSS?
    Hard to say without seeing the code.

    #866091

    this comment is here by accident. sorry.

    • This reply was modified 6 years, 5 months ago by chrisbryant.
    #866176

    I took a look through chrome inspector and hid elements until the background disappeared. This is the element that when hid, made the background disappear:

    <div class=”av-parallax-inner main_color avia-full-stretch” style=”background-repeat: no-repeat; background-image: url(http://gainzgarage.com/wp-content/uploads/2015/10/LP_Background_Banner.jpg); background-attachment: scroll; background-position: center center; “></div>

    There was also this overlay element before it, not sure if it matters:
    <div class=”av-section-color-overlay” style=”opacity: 0.4; background-color: #ffffff; “></div>

    • This reply was modified 6 years, 5 months ago by Zuluster.
    #866683

    Anyone have any thoughts on how to fix this?

    #866740

    Hi,

    I would suggest designing a second header with a custom class that on shows on mobile. To make it quicker, just duplicate the current section, and add your new class and mobile desired image. Then use media queries to show/hide as desired.

    Best regards,
    Jordan Shannon

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