Home Forums Archived Forums Mobile View Two different backgrounds on homepage (mobile and desktop)

This topic contains 6 replies, has 2 voices, and was last updated by  scrambler 1 year, 12 months ago.

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

    Otto
    Participant

    I have a few questions concerning http://www.sabinesatelier.nl

    1. Is it possible to use two different backgrounds for the homepage? I would like to use a different (portrait) one for mobile view.
    In the CSS per page option I have put: #wrapper {background-image: url(“http://www.sabinesatelier.nl/wp-content/uploads/2016/05/achtergrond-HOME.jpg”);background-repeat: no-repeat;  background-size:  cover}
    When I put a shortcode [hide_if device=mobile] before #wrapper of before {background-image: url: etc. ,  the background disappears in every view.

    2. Also I would like to use two different left-margins for the left sidebar, one for tablet and one for desktopview.

    Thanks for helping me!
    Greetings

    #32740

    scrambler
    Moderator

    To create Mobile specific CSS you can use Mobile classes as explain in the Guide article below
    https://guide.weavertheme.com/targeting-specific-pages-or-devices-for-styling-attributes-like-bg-image/

     #wrapper {background-image: url(“http://www.sabinesatelier.nl/wp-content/uploads/2016/05/achtergrond-HOME.jpg“);background-repeat: no-repeat;  background-size:  cover}

     .is-mobile #wrapper {background-image: url(MobileImageUrl);background-repeat: no-repeat;  background-size:  cover}

    #32741

    scrambler
    Moderator

    Same for the left sidebar margin

    .is-mobile #primary-widget-area {margin-left:5px;}

    #32742

    Otto
    Participant

    Thanks Scrambler, I appreciate your help very much.

    But, whatever I try, no result!
    In the CSS per page option I use this code:

    #wrapper  {background-image: url(“http://www.sabinesatelier.nl/wp-content/uploads/2016/05/achtergrond-HOME.jpg“);background-repeat: no-repeat;  background-size:  cover;}
    .is-mobile #wrapper  {background-image: url(“http://www.sabinesatelier.nl/wp-content/uploads/2016/12/achtergrond-HOME-mobile.jpeg“) !important; background-repeat: no-repeat;  background-size:  cover;}

    Only the first (landscape) version is visible on all devices.
    Is there anything else I need to do? Adding !important doesn’t help.

    #32743

    scrambler
    Moderator

    You cant put that CSS in the per page CSS with that syntax because it adds the page id class and that class should be attached to the is-mobile one.

    The proper syntax is to add a + on the mobile rule and re-add the page class (home) attached to is-mobile

    #wrapper  {background-image: url(“http://www.sabinesatelier.nl/wp-content/uploads/2016/05/achtergrond-HOME.jpg“);background-repeat: no-repeat;  background-size:  cover;}
    + .home.is-mobile #wrapper  {background-image: url(“http://www.sabinesatelier.nl/wp-content/uploads/2016/12/achtergrond-HOME-mobile.jpeg“) !important; background-repeat: no-repeat;  background-size:  cover;}

    #32744

    Otto
    Participant

    It works!
    Thans a lot Scrambler!

    #32745

    scrambler
    Moderator

    To explain the logic:

    when you add a rule in the per page style box, it automatically adds the page id class
    #wrapper {….}  becomes  .page-id-xxx #wrapper {…}

    The page-id-xxx class is on the body tag.
    The device classs like .is-mobile is also on the body tag, and therefore if both are in the same rule they should be connected with no space.

    If you put  .is-mobile #wrapper {…}  in the per page style box it becomes   .page-id-xxx .is-mobile #wrapper {….}  which is wrong as there is a space between the page id class and the is-mobile class.
    the correct rule would be .page-id-xxx.is-mobile #wrapper {…}

    By adding the +, you tell the theme to NOT add the page-id class and leave the rule intact.
    that allows you to put the full rule with the proper syntax after the + and not have the theme add its own page class.

    Hope that clarifies

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

The forum ‘ Mobile View’ is closed to new topics and replies.