Jump to content

How to make the website adjust to different computers?

Recommended Posts

Hi all,

Following a previous answer to my question I was able to remove in large part some of the white space which appeared to the right of my website when opened on a desktop: www.antoinesimonfineart.comThough after trying on additional monitors; mac and pc I have noticed especially on the mac desktop that there is still a lot of white space to the right. I have tried increasing the site width (as previously suggested) to the maximum but even that will was not sufficient on a mac desktop. I wondered if there is a way to make the page responsive to each pc so that it centers the page? Is this specific to the template (Wells) I am using perhaps? Perhaps by using a different template where the sidebar is positioned on the top as opposed to the left this would help center the website on different screens? Thank you!

Link to comment
  • Replies 4
  • Views 2.5k
  • Created
  • Last Reply

You can increase the width past the slider maximum - you just click the numbers and overtype them - but I don’t recommend it. The site is designed to have this maximum width and (it’s a personal thing) but I think it looks fine.

One thing that can make it look better is to center the content within the ‘white space’. There isn’t an option for this but it can be done with CSS and I’ve previously posted a solution.

If you don’t like this style then try previewing another template. You may find one you prefer.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

Thank you Paul. Indeed I realized that increasing the width doesn’t really make the website responsive. It becomes more centered on larger screen but too large for smaller screens/mobile. I have tried a few css coding but none seems to work on my site.Would you be able to share the link to your previous solution?

Thank you!Antoine

Link to comment

Thank you Paul. Indeed I realized that increasing the width doesn’t really make the website responsive. It becomes more centered on larger screen but too large for smaller screens/mobile. I have tried a few css coding but none seems to work on my site.Would you be able to share the link to your previous solution?

Thank you!Antoine

Link to comment

Try adding something like this to Design > Custom CSS:


#canvasWrapper {
 margin: 0 auto;
}

body.sidebar-position-left #headerWrapper {
 max-width: 225px;
 position: relative;
 top: initial;
 left: initial;
 }
}


About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.