How to make the website adjust to different computers?

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!

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.

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

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

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;
 }
}