Archived topic
Large header with left-aligned text, text bleeds over edge on mobile.
3 replies · Started by Jason on June 28, 2022
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
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;
}
}Hi Ying, that's perfect, thanks a lot!
You are welcome :)
