[Support request] Change breakpoints for content & sidebar (reliable/future-proof)

[Thomas]

Hi,

Is there a recommended way to change the breakpoints for the content and sidebar? Currently, the sidebar gets rather narrow on smaller devices.

There are several hints in the forums regarding how to do this but none of them seems to be the “official”/right and especially reliable way to do this.

Can you provide a standard solution that makes sure it’s done the right way respecting all aspects of how GeneratePress works?

Best,
Thomas

[Ying]

Hi Thomas,

Try this CSS, you can change the 900px to your desired breakpoint.

@media (max-width: 900px) {
.is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
    width: auto !important;
    order: initial !important;
}
.container .site-content .content-area {
    width: auto !important;
}
.site-content {
    flex-direction: column;
}
}

[Thomas]

Hi,

Thanks. It seems there’re additional changes necessary though. This is what I have now:

.is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
	width: auto !important;
	order: initial !important;
}
.container .site-content .content-area {
	width: auto !important;
}
.site-content {
	flex-direction: column;
}
body:not(.no-sidebar) #main {
	margin-bottom: 0;
}
#main {
	margin-left: 0;
	margin-right: 0;
}
}

Can you please check with the designer that the code above is complete and not missing anything critical?

Thanks!

Best,
Thomas

[Fernando]

Good catch. Yes, that would be good for the sidebar and the content.

If you would like to consider other CSS rules generated at 768px, here is something you may refer to:

@media (max-width: 900px) {
    .hide-on-mobile {
        display: none!important
    }

    a,body,button,input,select,textarea {
        transition: all 0s ease-in-out
    }

    .inside-header {
        flex-direction: column;
        text-align: center
    }

    .site-header .header-widget {
        margin-top: 1.5em;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }

    .site-content {
        flex-direction: column
    }

    .container .site-content .content-area {
        width: auto
    }

    .is-left-sidebar.sidebar,.is-right-sidebar.sidebar {
        width: auto;
        order: initial
    }

    .is-left-sidebar+.is-right-sidebar .inside-right-sidebar {
        margin-top: 0
    }

    .both-left .inside-left-sidebar,.both-left .inside-right-sidebar,.both-right .inside-left-sidebar,.both-right .inside-right-sidebar {
        margin-right: 0;
        margin-left: 0
    }

    #main {
        margin-left: 0;
        margin-right: 0
    }

    body:not(.no-sidebar) #main {
        margin-bottom: 0
    }

    .alignleft,.alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .comment .children {
        padding-left: 10px;
        margin-left: 0
    }

    .entry-meta {
        font-size: inherit
    }

    .entry-meta a {
        line-height: 1.8em
    }
}

Hope this clarifies. 🙂

[Author]

Posts