Remove as much blank space around margins as possible on blog pages

Site URL: https://vizchange.net

I have a website where I present climate and weather data visualizations. I have it setup on several tablet and touchscreen computers at a national park visitor center and hotel. I am trying to minimize the scrolling on pages to encourage the website to be explored as much as possible, so I am trying to limit any hurdles on various devices, for example, scrolling.

If you go to an example visualization (blog entry), I would like to maximize the space used for the visualization. I would like to reduce the empty space to the left and right of the data visualizations and the space above and below. Each blog page (where the individual visualizations are located) should fit to a screen on any device without or with as little scrolling as possible.

I am familiar with CSS coding, but still a novice. I have no spacer blocks and have no side-bar navigation menus.

Any suggestions for solving this problem and improving the layout to maximize the user experience with the visualizations is much appreciated. BTW: this is a pilot project!

You'll likely want to put it into Blog Item Code Injection but it's not really going to work. See, you could do something like the following:

article.entry {
  padding: 0!important;
}
.blog-item-inner-wrapper, .highcharts-container, svg.highcharts-root {
    width: 100%!important;
}

However, the "High Charts" widget that you're using is set for a max-width of about 900px so that's going to mean visually you probably won't see much difference.

I'd first look at the code you're using there and see if there's an option to make it full width.

3 hours ago, Kwamzilla said:

You'll likely want to put it into Blog Item Code Injection but it's not really going to work. See, you could do something like the following:

article.entry {
  padding: 0!important;
}
.blog-item-inner-wrapper, .highcharts-container, svg.highcharts-root {
    width: 100%!important;
}

However, the "High Charts" widget that you're using is set for a max-width of about 900px so that's going to mean visually you probably won't see much difference.

I'd first look at the code you're using there and see if there's an option to make it full width.

I can definitely change the size in High Charts. However, I still want to reduce the space top, bottom, left and right of the blog entry. I tried your code and it does not work. Suggestions.

On 8/10/2021 at 11:59 PM, keithwlarson said:

I can definitely change the size in High Charts. However, I still want to reduce the space top, bottom, left and right of the blog entry. I tried your code and it does not work. Suggestions.

Hi. Do you still need help?

It seems that I am maximizing the space available in SquareSpace 7.1.