block containing columns does not extend to edge on smaller screens

Hi @jefftaylor,

I could have suggested custom CSS code solution if you could have used this field in your query.

@kharisblank I overlooked this field. Location is on home page: https://nashvillemusicdesign.com/

Thanks for getting back along with additional information.

Try this simple CSS code:

@media only screen and (max-width: 1023px) {
  
    body .site-main.no-sidebar, 
    body .no-sidebar .site-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
}

Add it to your site’s Additional CSS, that is located under Appearance > Customize menu.

@kharisblank That worked well on the home page, but can’t live with no padding on the rest of the site. Do you have any suggestions as to how this change can only be made to the home page where I have the container blocks?

@kharisblank This is my current additional CSS code…

.page-id-1906 {background-color:#333132;}
.remove-bottom-space {
margin-bottom: 0;
}
.remove-top-space {
margin-top: 0;
}
.content-wrapper {
margin-top: 0px;
}

.single-post .content-wrapper {
margin-top: 10px;
}

@media only screen and (max-width: 670px) {
.entry-content .wp-block-image{
margin-left: -15px;
margin-right: -15px;
}
}

Shown above, I do have an “@media only screen” CSS code included. It works nicely throughout the site, but wanting no margins on the home page only, not the whole site. Is there a way to just change how the home page responds on mobile by having no margins there, while keeping other pages as they are? Thanks in advance.

Hi @jefftaylor,

Try this CSS code:

@media only screen and (max-width: 1023px) {
  
    body.home .site-main.no-sidebar, 
    body.home .no-sidebar .site-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
}

Thanks so much @kharisblank, working great!

Thanks Kharis!