Hello @airbjorn,
Trust you’re doing well!
There is following CSS code added into your theme
@media screen and (min-width: 48em) {
/*other CSS*/
.has-sidebar:not(.error404) #primary {
float: left;
width: 58%;
}
}
Please locate this CSS and change float: left; to float: right;
@media screen and (min-width: 48em) {
/*other CSS*/
.has-sidebar:not(.error404) #primary {
float: right;
width: 58%;
}
}
If you can’t find this CSS please add to your child theme style.css file the following, or to Appearance > Custumize > Additinal CSS field:
@media screen and (min-width: 48em) {
.has-sidebar:not(.error404) #primary {
float: right;
}
}
Hope this helps!
Kind regards,
Nastia
Hi Nastia, thanks for your quick reply! However, with this change, the sidebar of the blog entries also gets displayed on the _left_ side.
So actually the change moved the content to the right, not the sidebar itself. At the same time, the example page looks exactly like before.
Yet I figured out a solution which looks quite as I wanted it. In my child theme I added the following CSS:
/* Sidebar on pages should appear on the right hand side (default: left) */
@media screen and (min-width: 48em) {
body:not(.has-sidebar):not(.page-one-column) .page-header,
body.has-sidebar.error404 #primary .page-header,
body.page-two-column:not(.archive) #primary .entry-header,
body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
float: right;
}
/* wide actual content to 64% (default: 58) */
blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content,
body.page-two-column #comments {
width: 64%;
}
}
Have a look at https://forum.dcb.org/flatlands-gs/ now (although I’m a bit confused there is no gap between content and sidebar).
Yet I tested with Safari @macos.
Now I see, Firefox @windows renders the page differently, the sidebar continues to show up on the left.
Therefore to assure the proper side, I added
float: left;
to the lower content code.
Is there anything more I should take care of when changing the CSS code?
Hello @airbjorn
This seems a fair approach! 🙂
although I’m a bit confused there is no gap between content and sidebar
With 64% content and 33% sidebar, there’s a 3% gap between them (for the 100%).
You should further lower down any one of them in order to create more space between them.
Warm regards,
Dimitris
Thanks a lot Dimitris – the 64% vs 33% already is my solution. I’m happy that you confirm my changes are at the proper place. Because at the same time I’m a bit afraid modifying things at the wrong place, which break the design in other configurations I might get faced to later on.
Warm regards РBj̦rn
