[Resolved] Large header with left-aligned text, text bleeds over edge on mobile.

[Jason]

Hi, I’m using the “large header with left-aligned text” block (https://wordpress.org/patterns/pattern/large-header-with-left-aligned-text/) and I can’t get the text contained within that block to display right on mobile.

I’ve tried this css from another post but that didn’t work (https://generatepress.com/forums/topic/how-do-i-increase-the-margins-around-my-columns-in-mobile-view/). I’ve tried changing content padding in the customizer layout container settings. I’ve tried reducing the columns to just one column to see if the test was still too wide. It was. I can’t seem to make the text fit properly on mobile.

Thanks

[Ying]

Hi Jason,

Using WP’s pre-styled block in GP gets tricky sometimes.

Give this CSS a try:

@media (max-width: 768px) {
    .entry-content .alignwide {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
}
    .entry-content .wp-block-group__inner-container {
        padding-left: 0!important;
        padding-right: 0 !important;
    }
}

[Jason]

Hi Ying, that’s perfect, thanks a lot!

[Ying]

You are welcome 🙂

[Author]

Posts