Left and Right Margins

There is a weakness to the Twenty Seventeen Theme that we will address here.

Generally, there is a lot of wasted space on Posts and Page in the left and right margins. In this example from my website https://opensourcegathering.net.nz/07-pacific-link/, you can see large margins left & right,

To overcome this we can add the following CCS code to your website.
This is one of the few times I will get you to bash some code, but it is safe and easy, I promise.

Goto Appearance -> Custimise -> Additional CSS.

This should be blank.

In to the Additional CSS box add the following:

.single-post:not(.has-sidebar) #primary, 
.single-post:not(.has-sidebar) .site-content .wrap,
.page.page-one-column:not(.twentyseventeen-front-page) #primary, 
.archive.page-one-column:not(.has-sidebar) .page-header, 
.archive.page-one-column:not(.has-sidebar) #primary {
    max-width: none;

.wrap { 
/* margin-left: auto; */
/* margin-right: auto; */
max-width: 80%;
/* padding-left: 2em; */
/* padding-right: 2em; */
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 70%;
/*set the sidebar width and alignment*/
.has-sidebar #secondary {
width: 25% !important;
float: right;

@media screen and (min-width: 48em) {
.wrap {
max-width: 80%;
/* padding-left: 3em; */
/* padding-right: 3em; */

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
/*margin-left: auto;*/
/*margin-right: auto;*/
max-width: 80%;

@media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap
max-width: 80%;

.has-sidebar #secondary {
width: 26% !important;

.site-info { display: none; }

.et_pb_map_container .gm-style-iw-d {
    background: white !important;
	padding:20px !important;
	border-radius: 10px !important;
	overflow: hidden !important;

Click on Publish to save. Now that page looks like this:

Divi: Code Snippets

All these snippets go in to the Dashboard -> Appearance -> Customize -> Additional CSS.

Greater gap between Menu Items

.et-l--header .et-menu-nav>ul>li {
     padding: 0 30px!important;

Adjust the 30px to what you want.

Make Post Section Transparent

.single-post #main-content {
 background-color: transparent;

Blog Preview on Large Screens

Had an issue using “Blog Settings”, where I naturally had three across on smaller screens, 1600px wide, but on HD, 1920px, it became two wide and that misplaced on the screen. To fix this Sergey from Divi got me a solution. First go to the Divi -> Theme Builder and in your Blog Template in the Blog Settings -> Advanced -> CSS ID & Classes -> CSS Class add


Then in Divi -> Theme Options -> General -> Custom CSS add

@media only screen and (min-width:981px) {
    .cu-blog .column.size-1of3 {
        width: 29%!important;


A theme is what makes your website look like it does.

We are going to be using the Twenty Seventeen theme as a means to get started. There are thousands of free themes, as well as thousands of themes you can pay for. Many of the Paid for themes have a free option that can help you see if you want to go ahead and pay for the full theme.

Continue reading “Themes”


Pages are for your static articles.
These are not likely to change often, but you do want to edit them and make sure the information in them is current.

Pages are for things like About Us, Contact Us, Some History, Our Location.
This is as opposed to Posts that are more chronological and category-based, think Blogging.

Continue reading “Pages”


Divi is an extremity powerful theme builder. https://www.elegantthemes.com/. We have a site license for this theme, so you do not have to pay the full price. Please contact us directly for us to install this theme builder on your copy of WordPress with us. We would appreciate a “pay what you can” as we seek to make this and other plugins available to you.

We are working with a location at the moment to bring their website up to date. One of the issues we are dealing with is that the main theme used to build the site is decrepit, meaning that there is no way to update the theme. Unfortunately even updating content from the theme is not possible. So we are applying the Divi plugin to make a transition from the old unusable theme to a valid current theme. It’s quite useful that we can use the current CSS of the theme to manage the changeover.

Continue reading “Divi”