Different background for mobile through 3 different pages

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

Also if any of you know about how to do what I want to do (placing this text close to the footer and keeping same color/dimension/style) without having to use code I'll be glad to know it!

Thank you again for all your help

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.

Sure! The website is: http://www.vocaciontrinitaria.com

pass is Mindundis20

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.

Thanks Ziggy, the point is that Every time I open the editor, when I try to move things inside of it, every time they change their position to random position. I think is a problem of Squarespace, I actually have an iMac Pro

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.

Yes I think, they definitely didn't want to help me, so I've asked for refund. Thank you Squarespace! But Ziggy helped me more than you without giving more than problems. 

Really Thank you so much Ziggy

3 hours ago, aeternolab said:

Really Thank you so much Ziggy

No problem, glad to help but sorry you didn't get on with the platform, good luck elsewhere!