Different images for Desktop and Mobile mode

Site URL: https://christiandagostino.squarespace.com/

Hello everybody

I have just started using Squarespace, I was wondering if was possible to completly change an image from the Desktop and mobile mode.

It seems that everything I do in desktop mode is automatically adjasted for mobile, and if I try to modify the mobile it changes back the Desktop one.

How can I unlink the two in order to use different layouts and images?

Many thanks for any tip.

Cheers,

Christian

Most high end website development systems like Squarespace are designed to be desktop and mobile friendly. Also known as responsive.

This is achieved in most cases by taking a single element like an image and applying different CSS depending on if on desktop or mobile.

The key to altering an element is understanding when the CSS for desktop or mobile is being applied.

That is not something that can be explained in a few sentences.

If you can explain what you are trying to achieve we might be able to help. If you want to DIY it can take a fair amount of time to learn CSS.

So basically in Desktop mode you can see the picture like that and the text with that layout, but if I edit the layout and pic on the mobile version automatically changes the mobile too.

I would like to use a different picture (without the darker half), and move the text below, or anyway experiment to see which one fits best. 

Do I need to use CSS for that or is it possible through squarespace editor?

Thanks

We can't see your site it is private.

In similar situations to what you describe I suggest making two page sections. One that looks good on desktop and one for mobile. Then with some CSS it is possible to show/hide the sections depending on desktop or mobile.

I have the same issue and your solution seems perfect but i can't get it to work. can you tell me what CSS i use and where to put it? In an different thread someone recommends this below and putting it in the "advance page settings", I assume on the main page that people will be directed to, then this should automatically put them on the mobile version?

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://google.com";
}
</script>

On 2/2/2024 at 3:03 AM, JHF said:

I have the same issue and your solution seems perfect but i can't get it to work. can you tell me what CSS i use and where to put it? In an different thread someone recommends this below and putting it in the "advance page settings", I assume on the main page that people will be directed to, then this should automatically put them on the mobile version?

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://google.com";
}
</script>

This code should work. Can you share link to page where you added this code?