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
  • Views 508
  • 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. 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

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

@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

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

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. 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

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

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

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.