To make a nice online reading experience I find it good to get rid of clutter, keep the text nice and readable, images big and with enough space between elements. The following settings are meant to achieve that. These examples will use id’s and class names from the generatepress theme. Class names and id’s might be different between themes, but generatepress seems to follow the norm. The methods described here might work with a lot of different themes, but you might need to go ‘selector hunting’ with the browser inspecot to make all the CSS stick.
To make it clear what this CSS if for, here is an example page with a couple of images and some dummy text.
It is not very hard to set up, explanation follows. The aim here is a full size image and then also to have images that align with the text. The text shoould have a max-width for readability.
First you need to make a new page for this, and you need then need to make a specific selection in the right hand dashboard for ‘Content container’. You need to set this to full width so we can have full width images. Using the full width option on the page looks better with header, navigation and footer also set to full width
- Make a new page
- Go to ‘Content container’ under settings for the page (dashboard on the right).
- Set ‘Content container’ to full width
- You might want your header, navigation and footer to also be full width
This will make all your content full width, images and text. This looks good for images, but on a large display it is much to wide for text so that text needs margins. We can set classes on all elements we want contained so the class name will be ‘contain’. This is especially useful for images because we want both full width images and contained images. It can also work on other elements but look out for conflicting CSS rules.
.contain {
margin-left: 20%;
max-width: 600px;
}In my opinion percentages in combination with max width often works well for large displays, not so much for mobile screen. We will make media queries for that later.
Now you can simply put the ‘contain’ class name on all elements you want contained; text, images and whatever else. That will bring you close to a nice layout, but the entry-header for example won’t allow you to attach a custom css class to it, and if we use the generic class .entry-header we target all entry-headers also on normal width pages. We don’t want that so we need to specify our CSS better for these cases. Remember the descendant combinator?
When we make a full width page in generatepress (and maybe other themes?) we get a specific selector on the page element that we can use to only activate this CSS on full width pages. In the inspector right click on your page, then navigate up in the DOM tree until you find an element width id=”page”. Click on this element and check it’s CSS panel in the inspector. That will reveal the following selector setting this page’s width property to 100%
.full-width-content .container.grid-container {
max-width: 100%;
}What we want from this is to combine this selector and the selectors of the elements we want to contain on the full width page. Usin the descendant combinator we then get these selectors to use withthe same CSS rules we used for the .contain class.
.full-width-content .container.grid-container .entry-title{
margin-left: 20%;
margin-top:0.6em;
}That sets the .entry-title to align with the paragraph and .contain elements. We can also do this for paragraphs and headings. Keep an eye out for elements that might not be targeted by this CSS and simply add the class names as in the example above. Here is the same descendant combinator with paragraphs:
.full-width-content .container.grid-container p{
margin-left: 20%;
max-width: 600px;
}Here is the final CSS (the one you should copy paste) targeting all paragraphs and headings inside the full width page element. The multiple selectors are a monstrosity but in return there are much fewer values to adjust.
.full-width-content .container.grid-container .entry-title,
.full-width-content .container.grid-container p,.full-width-content .container.grid-container h2,.full-width-content .container.grid-container h3,.full-width-content .container.grid-container h4,.full-width-content .container.grid-container h5,.full-width-content .container.grid-container h6,
.full-width-content .container.grid-container h7{
margin-left: 20%;
margin-right: 20%;
max-width: 600px;
}Media queries for mobile screens
This is all fine on large displays, but we also have to cater for mobiles. Here is some media query code you can try. remember that this code must be placed after the previous ones in the script or it will be overruled. The following media query will set left & right margins to 4% for paragraphs, headings and the entry title on small screens. It also sets paragraph font-size to 0.8em on small screens. This is meant as a starting point with working selectors for you to make whatever adjustments you want.
@media screen and (max-width: 550px)
{
.full-width-content .container.grid-container .entry-title,
.full-width-content .container.grid-container p,.full-width-content .container.grid-container h2,.full-width-content .container.grid-container h3,.full-width-content .container.grid-container h4,.full-width-content .container.grid-container h5,.full-width-content .container.grid-container h6,
.full-width-content .container.grid-container h7{
margin-left: 4%;
margin-right: 4%;
}
.full-width-content .container.grid-container p{
font-size: 0.8em;
}
.full-width-content .container.grid-container .entry-title{
margin-top:0.6em;
}
}