How to edit mobile view only?

Hi guys, recently I made this website about puzzles - www.puzzlereview.com.

On the home page at the bottom I have links for RSS, facebook and a newsletter block. I think in desktop/tablet view it doesn't look too bad (if you have suggestions for visual improvement, please let me know), but in mobile view these three get stacked on top of each other and stretched width-wise. This makes the facebook button abnormally large and doesn't look good. Can I edit the mobile view only so that the RSS and the facebook buttons still appear next to each other on phones?

Also, for the blocks above them, Squarespace first puts the pictures on top and then the Markdown blocks with the text underneath below. Can I rearrange this order as well?

Thanks, Artur

Other than the order of blocks Squarespace doesn't offer a huge amount of control over the size of blocks on mobile.

This page describes your available options:https://support.squarespace.com/hc/en-us/articles/205815288

This topic is quite subtle in the way it works, so I'd recommend you talk with Squarespace support to see if they tweek that Facebook block. I'd be interested in knowing how you/they get the Facebook block looking right so please post an update.

Hi and thanks for your answer. This is what SSCS replied:

There is not a way to edit or adjust individual blocks on mobile or otherwise that is built in.In order to customize the mobile view or individual blocks it will require custom coding.Please note that adding CSS or custom code on Squarespace is an advanced modification. We recommend that you have coding knowledge before attempting to use custom coding.Third-party services or custom code falls outside the scope of the support we are able to offer.Alignment Question:There is a way to change the layout for the text/markdown/image blocks for the categories of puzzles' sections.At the moment the image is wrapped in the text similar to quote. Like described in this guide:

Wrapping Text or Image within Text

If the Image Block is placed beside the Text it will put the image below the text when viewed in mobile.The nature of our mobile styles will place blocks atop one another from left to right.I hope that helps to clarify. Please let me know if I can help with anything else.

Thanks. I'm surprised there isn't some way using the current feature set to do it

I recommend you reply and ask them to add this feature, otherwise they'll never fix this problem

I'm not convinced the alignment answer they gave you is complete . if you dewrap the text and put it in separate blocks you may have more options as per the help page.

Sadly squarespace is very constricted in how to edit the mobile view. It's honestly one of the SS's weakest areas.

Does anyone know where to get the CSS code for this?

17 hours ago, tentworks_interactive said:

Does anyone know where to get the CSS code for this?

Can you describe your problem in detail? We can help easier.

funny that its 4 years later and the ability to edit different screen sizes still doesn't exist. I believe wordpress has the ability to edit different screen views (for anybody that doesn't know how to fix this with JS and CSS). I thought the whole point of wysiwygs was to make this fast and simple?

And why has the scam comment that links you to remote desktop not been removed?? is this normal on squarespace forums?

Really disliking squarespace more and more each day. I'm def going to try and convince my clients to use something else for now on -_-

Quote

Really disliking squarespace more and more each day. I'm def going to try and convince my clients to use something else for now on -_-

It's funny, I was never tempted to use Squarespace because the product always seemed crappy. Having used it for the last week, and realizing that I was absolutely right. This particular problem is yet another reason to stay away.

would love to know if in 2021 you can edit formatting between mobile and desktop is available yet or is responsive design not in service rn?

2022 .. still nothing. 👎

You won't believe it! 2023! still. nothing.

Now you can edit Mobile View. It won't affect desktop

See detail here: https://support.squarespace.com/hc/en-us/articles/6421525446541-Editing-your-site-with-Fluid-Engine

On 6/2/2023 at 4:01 PM, tuanphan said:

Now you can edit Mobile View. It won't affect desktop

See detail here: https://support.squarespace.com/hc/en-us/articles/6421525446541-Editing-your-site-with-Fluid-Engine

This doesn't work for me, even though I have confirmed I am using the Fluid Engine. Adjusting padding within a gallery or any interactive element still damages the view on Desktop.

Where would I find the CSS code to make a section only display on mobile, and hide it on desktop, and the opposite?

On 9/23/2023 at 2:44 AM, CamStLouis said:

This doesn't work for me, even though I have confirmed I am using the Fluid Engine. Adjusting padding within a gallery or any interactive element still damages the view on Desktop.

Where would I find the CSS code to make a section only display on mobile, and hide it on desktop, and the opposite?

You can use this CSS code (replace with your data section id)

/* Hide 1 section on desktop */
@media screen and (min-width:768px) {
	[data-section-id="idxxxxx"] {
		display: none !important;
}
}
/* hide 1 section on mobile */
@media screen and (max-width:767px) {
	[data-section-id="idyyyy"] {
		display: none !important;
}
}

Use this free tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff