Jump to content

Custom Image on Mobile Site

Recommended Posts

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

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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. 

Link to comment

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

Screen Shot 2022-02-02 at 2.48.41 PM.png

Link to comment

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. 

Link to comment

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

Link to comment

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?

Edited by christyprice
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.