Archived topic

Change breakpoints for content & sidebar (reliable/future-proof)

3 replies · Started by Thomas on May 29, 2022

Viewing posts 1–4 of 4

May 29, 2022 at 6:48 am #2236811

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

May 29, 2022 at 11:39 am #2237165

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;
}
}

May 29, 2022 at 11:33 pm #2237489

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

May 30, 2022 at 1:43 am #2237646

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. :)

This archived topic is closed to new replies.

Start building better websites today.