Jump to content

Different background for mobile through 3 different pages

Recommended Posts

Hi everyone!

 

Today I'm trying to do the following thing to my website. 

I want to put 3 words just next to the footer, actually, it's working without problem already. The problem comes when I try to see it on mobile.

I have a different image just for it, with the deescalated resolution, and fitting perfectly, and it worked without problem on the homepage, but what about the others?

The website has 3 different pages, called "Discierne", "Conoce" and "Ser Trinitario" also the Home landing page.

The code I've used to change the background from the homepage desktop's version to mobile's version is the following:

 

@media only screen and (max-width: 640px){
body:not(.view-item) #page .page-section:nth-child(3) .section-background img {opacity:0 }
body:not(.view-item) #page .page-section:nth-child(3)  .section-background {
background-image: url(https://static1.squarespace.com/static/6358e737b6bd2b0a7e5c543b/t/637f2f20ca58bc0709564e62/1669279520834/1try.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

 

If I repeat this line of code to change the other 2 pages I already need to change, the change get's shown in the whole website, so the main problem is to do the "desktop to mobile conversion" without affecting the whole sections of the page.

 

Hope you can help me, thank you so much

Link to comment

Can you share your website URL?

One thing you need to do is target the code to each page using either the page header code injection and <style> tags, or by using each page's unique #collection-id {} with that CSS within the brackets, and repeated for each page.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Given that you're using Fluid Engine, I feel like this would actually be much easier if you just added the image to the page, and set the section to fill and align the image to the bottom, you can also adjust the image easily on mobile like that too.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
2 minutes ago, aeternolab said:

Every time I open the editor, when I try to move things inside of it, every time they change their position to random position.

This sounds like a major problem for editing, probably needs addressing by Squarespace Support before resorting to coding everything.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.