Two different backgrounds on homepage (mobile and desktop)

[Otto]

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

[scrambler]

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}

[scrambler]

Same for the left sidebar margin

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

[Otto]

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.

[scrambler]

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;}

[Otto]

It works!
Thans a lot Scrambler!

[scrambler]

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

[Author]

Posts