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