Header and Footer full length on mobile

Hello there,

As checked, I found this CSS code may present in your site’s Additional CSS.

.container {
    width: 750px;
}

This code breaks responsiveness of .container element in smaller screen. Please remove it and run your test. Let me know how it goes.

[ Signature deleted ]

• This reply was modified 4 years, 9 months ago by Jan Dembowski.

Hello, I checked my additional CSS and I don’t see that code.
All I have in additional code is

`.content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}

.content-area .site {
margin:0px;
}
.page .entry-header {
text-align: center;
}
@media all and (max-width: 1025px) {
.x-container-fluid.offset {
margin: 0 auto 40px auto;
}
}
@media only screen and (min-width: 1025px) {
#masthead.site-header .container {
display: flex;
}
#masthead.site-header .container .site-branding {
width: 20%;
}
#mainnav.main-navigation li {
padding: 10px 7px;
}
}

Hello there,

Thank you for getting back.

Try adding this code to your site’s Additional CSS:

@media only screen and (max-width: 780px) {

  .site-header .container,
  .footer-widgets .container {
    width: 100% !important;
  }
  
}

If it doesn’t work, try:

@media only screen and (max-width: 780px) {

  .container {
    width: 100% !important;
  }
  
}

Let me know how it goes.

[ Signature deleted ]

• This reply was modified 4 years, 9 months ago by Jan Dembowski.

The second worked great. Thank you

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

[ Signature deleted ]

• This reply was modified 4 years, 9 months ago by Jan Dembowski.