Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 1, 2018 at 3:55 pm #919705
    whdsolutions

    On the site (mentioned) I have lots of colour sections with section background images contained within on various pages.

    Is there a simple way to hide these images when the site goes into mobile mode???

    Your expertise is ALWAYS appreciated!

    March 2, 2018 at 4:59 am #920068
    Mike

    Hey whdsolutions,
    You could add this code in the General Styling > Quick CSS field, it will remove the background image for the sections for devices smaller that a tablet.

    @media only screen and (max-width: 767px) { 
#overlay-section,#av_section_2,#av_section_3,#av_section_4 { background-image: none !important;
}
}

    As you can see each ID has a different name, if you went into each color section and gave them all the same name you code would only require one ID. But as it is today, this code should work, please try.

    Best regards,
    Mike

    March 2, 2018 at 2:29 pm #920353
    whdsolutions

    This has not worked :-(

    March 2, 2018 at 2:31 pm #920356
    whdsolutions

    It has taken away the whole colour section – I only require the image to hide :-)

    Sorry I should have explained better :-)

    • This reply was modified 6 years, 8 months ago by whdsolutions.
    March 2, 2018 at 3:05 pm #920374
    Mike

    Hi,
    OK, I thought I understood :) The color sections are still there, the css only hide the background image, which left a black background.
    For example, the link in the Private Content area is to the first color section background, which is brown on the left side & a guy on the right.
    Could you create a mockup of what you would like to see? Thanks :)

    Best regards,
    Mike

    March 2, 2018 at 6:22 pm #920466
    whdsolutions

    Hi there

    We would like to keep the background colours – just not the image

    http://ninjaadventure.co.uk/wp-content/uploads/2018/03/Untitled-2.jpg

    March 3, 2018 at 3:34 am #920617
    Mike

    Hi,
    Ok, that would be a different solution as the color you want to keep is a part of the image you want to remove.
    To do this create a copy / clone of all of your color sections and place under your current sections, with the new mobile color sections having new background images that match your desired background colors.
    For each color section go to Screen Options > Element Visibility and choose “Hide on very small screens” for your current sections,
    2018-03-02_2019171
    and choose the other 3 larger screen options for your new sections.
    2018-03-02_2019172
    Also include ID’s to the “For Developers: Section ID” field for the color sections depending on when you want them to hide, for fine tunning, should it be nessary,
    2018-03-02_202847
    2018-03-02_202922

    Best regards,
    Mike

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