Jump to content

CSS friendly on different devices

Go to solution Solved by Ziggy,

Recommended Posts

Hi, I'm new to Squarespace and CSS coding, my website doesn't respond well to different devices.

Although I watched a lot of videos and read a lot on the subject. I can't do it alone.

Please, someone, write me step by step how and what should I write as CSS code so that the website can display on all devices correctly.

Thanks in advance

Boris

Link to comment
  • Replies 14
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

22 minutes ago, BorisN said:

Please, someone, write me step by step how and what should I write as CSS code so that the website can display on all devices correctly.

Honestly getting this right comes down to more factors than just fixing it with CSS, the way that you set up the pages, the general content width, how you layout the content, the type of sections you use, when and when not to use galleries or lists rather than laying out the section in blocks, whether you break up sections or leave them as one long section.

I think if you are having specific issues on specific pages, and can share the problem and the page URL, then I or someone else can help you address that, and hopefully you can learn from different people's approaches and find ways to design and adjust your website that work for you.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Ziggy, thank you for your review 

I have a one page website  www.3siixty.com. 

To paint a better picture, I am a complete beginner in this field. If it's complicated, explain it to me as for a 6 year old child.

Thanks

Link to comment

To start with, the text in the first section is made up of 7 overlapping text blocks, which is why it looks like this on tablet-sized screens. The fix is to simplify it, either use one text block for all of the text, OR use two text blocks, one for the header and one for the sub-header but make sure the blocks don't overlap each other.

image.thumb.png.0e1f99281eb4d31d9cd377ee181356cd.png

 

Here you have the same problem, too many and overlapping text blocks in yellow, and in red the text blocks need to be wider, give the text some room when the columns get narrower. As a general rule, try not to make a block that only just fits the width of the content, screens get narrower, try and account for that when designing on desktop.

image.thumb.png.c596e47106320d25f8c805ae3d31c7ad.png

Another example of the same problems, overlapping and too narrow:

image.png.ab2dea4de6f3f65811d254fb364cfd44.png

 

Let me know how you get on with fixing some of these problems, and I can jump back on and see what else can be done, especially if you see things that you want to fix.

As a final note, I don't see any problems here that need fixing with coding, it's all about layout. 

PS mobile layout looks pretty good, but would be more robust with the block changes I'm suggesting.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thank you, Ziggy,

I think I managed to correct everything as you advised me, I collected the text in one blog and gave more space. But it's still not ideal.

Is there any info somewhere where I can read more about the layout and grid proportions of Squarespace sections?

Link to comment
9 hours ago, BorisN said:

But it's still not ideal.

In what way?

It looks like there are still more text blocks than necessary and they're still overlapping each other.

9 hours ago, BorisN said:

Is there any info somewhere where I can read more about the layout and grid proportions of Squarespace sections?

I'm not sure, what do you want to learn?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

The title and subtitle are now just two blocks. And so that they don't stand up for each other, everything should be one blog. In that case, why are there blocks?

That's precisely what I meant about the grid layout and proportions. Why didn't I come across information anywhere that Squarespace should be from one block of the entire internet site?

When you asked me: "In what way?" '' - When I rotate the phone (Samsung S22) horizontally there is still overlap, on Samsung A53 there is overlap.

When I mentioned CSS, I came across a video:

(https://www.youtube.com/watch?v=K24lUqcT0Ms&list=LL&index=6)

See it from 9:02, It seems more practical. I tried this code, but it didn't work, most likely I lack skills and knowledge. Is this code from the video possible to integrate into Squarespace?

Link to comment
3 minutes ago, BorisN said:

That's precisely what I meant about the grid layout and proportions. Why didn't I come across information anywhere that Squarespace should be from one block of the entire internet site?

It doesn't have to be one block, there are good reasons to have multiple blocks, but the way you had the design with lots of overlapping blocks trying to act like one block of text was why I suggested that you simplify the setup to one block.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Sorry to hear that, but it does have far fewer issues than it did, so hopefully that's positive.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes that's right, without your advice I wouldn't have been able to find the problem.

For which I thank you once again. But if it was your site, you wouldn't be happy with the end result, would you?

I mean that there cannot be no solution to the task. Half positive didn't suit me.

Can I say thank you, a donation, or some way...?

Link to comment
15 hours ago, BorisN said:

For which I thank you once again. But if it was your site, you wouldn't be happy with the end result, would you?

Not entirely, no.

Although Squarespace does offer a very good platform for anyone to use, that doesn't mean that it will always produce a flawless result.

If you would be interested in me helping further, I wouldn't mind giving you an hour of my time to myself re-lay out your homepage (non-destructively) so you can have a better impression of what's possible.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
4 hours ago, Ziggy said:

Although Squarespace does offer a very good platform for anyone to use, that doesn't mean that it will always produce a flawless result.

Honestly, that's exactly how I envision it, no problems. Moreover, it is a one-page website without any fancy stuff.

4 hours ago, Ziggy said:

If you would be interested in me helping further, I wouldn't mind giving you an hour of my time to myself re-lay out your homepage (non-destructively) so you can have a better impression of what's possible.

Sounds generous, I'm interested. How could I benefit?

Link to comment
  • Solution
31 minutes ago, BorisN said:

Honestly, that's exactly how I envision it, no problems. Moreover, it is a one-page website without any fancy stuff.

It's like a point-and-shoot digital camera, it does lots of the heavy lifting for you and makes it easier to take a photo than with a film SLR camera, but it doesn't mean you get a prize-winning photograph every time. In a similar way a website is not just the tool you use to build it, the content, layout, design, fonts, colours all have an impact, Squarespace hasn't put website designers out of business.

36 minutes ago, BorisN said:

Sounds generous, I'm interested. How could I benefit?

You would have your website page designed and the comparison may help you understand Squarespace better. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.