Jump to content

Different images for Desktop and Mobile mode

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 3.8k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

1.png

2.png

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 year later...

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>
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.