Custom Image on Mobile Site

Site URL: http://meredithpullara.ca

I have added a custom image on my mobile site's homepage but it is now appearing on the background of all of my mobile pages.

Can you help make it so that it only appears on the homepage?

Here is the code I used:

@media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url(https://static1.squarespace.com/static/5fa9ebbaa3f03b5541d98eb5/t/61f1a67cb5ac953c2d7c761b/1643226750926/Copy+of+Copy+of+MEREDITH+PULLARA+%28650+%C3%97+300+px%29+%28640+%C3%97+900+px%29.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Hi Meredith, you'll want to target just that specific page using #collection-5fa9f2e4d40a8a1cf7afd0b5 (for anyone reading this later, this code is specific to Meredith's site - I'm using the block ID method here to find it).

You can add #collection-5fa9f2e4d40a8a1cf7afd0b5 before #page in both instances. 

Thank you so much, Christy!! 🙂

So I made some changes to my site and now it is happening again (the image that is supposed to replace the first section of my homepage is taking over the background of the entire homepage.

Can you help again?

------

/*different homepage image on mobile*/
@media only screen and (max-width: 640px){
#collection-5fa9f2e4d40a8a1cf7afd0b5 #page .page-section:nth-child(1) .section-background img {opacity:0 }
#collection-5fa9f2e4d40a8a1cf7afd0b5 #page .page-section:nth-child(1)  .section-background {
background-image: url(https://static1.squarespace.com/static/5fa9ebbaa3f03b5541d98eb5/t/61f1a67cb5ac953c2d7c761b/1643226750926/Copy+of+Copy+of+MEREDITH+PULLARA+%28650+%C3%97+300+px%29+%28640+%C3%97+900+px%29.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
 

@meredithpullara  - this method may work better for you - it lets you show/hide an entire section: https://christyprice.com/blog/show-different-banner-mobile-desktop

Beautiful! Thank you so much! :):):):):):)

I am having trouble using that code on other pages. Is there anything I need to add to make it work?

Thank you so much for your help.

Hmmm, it should work the same across the pages if you’re using the code injection method and adding the code to each page.

If you are using the method where you target specific section IDs that would need to change for each page. 
 

If you want to drop a page link here where you have the code installed but it’s not working I (or someone else if they see this sooner) can take a look. 

I just couldn't get it to work on the "maternity" page. Only the "home" page. Not sure what I am doing wrong.

So I tried something else using CSS. But now I am running into a problem with a big gap at the top of the page.

// *Hiding and showing sections*//
@media screen and (max-width: 641px) {
section[data-section-id="61fb24fef41ea065282cf1f5"] {
 display:none !important;
  }
}
@media screen and (min-width: 641px) {
section[data-section-id="61fb2509340fe1777b1239f1"] {
 display:none !important;
  }
}

On the Maternity page, I'm seeing a blank section: section[data-section-id="61fbf53f8795613c019bdd82"] appearing between the two for desktop and mobile. So a large empty space after the desktop section and a large empty space before the mobile section. Deleting that empty section should fix the issue.

On the homepage, it looks like you have a mimimum height set. Here's what I'm seeing in the code:

.page-section.section-height--medium:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
    min-height: 66vh;
}

So that may be a section height you've used?