Stretch Menu/Header/Contact Info & Footer including my sitemaps section to "Fully Stretched Width"

Hello,

website: www.your-cricket-bat.com

I need to stretch the top header including the menu and contact info to “fully-stretched width”.

I also need to stretch the bottom footer including my site map section, the privacy policy section and the footer credits to “fully stretched width” as well.

I have attached some photos to help.

Thanks
Shahan

Hello there,

That isn’t really default behavior of the theme. I found the below custom CSS code applied is causing you that issue.

#page {
    max-width: 1170px;
    margin: 0 auto;
}

Try removing it and refresh your site. Do you have a specific purpose of why that code added? Probably I could suggest you with better one.

Regards,
Kharis

Hello Kharis,

I can’t find this exact CSS code? Can you please explain in more detail where to find it? When I go to customise, then Additional CSS this code is not present.

Kind regards,

Shahan

Hello Shahan,

From you site dashboard (/wp-admin), visit Appearance > Customize > Additional CSS panel. Doesn’t it present in there?

Regards,
Kharis

Hello Kharis,

It’s not in there. I can copy and paste my full CSS file for you if you like?

Consumer Insights

organic-toothbrush.com

logo small

enquiries@organic-toothbrush.com

I have pasted the CSS below in red text.

Thanks,

Shahan

input.input-text.qty.text { padding: 5px !important;}

.site-info.container { display: none; }

h1.entry-title{ text-align:center;}

.site-branding{z-index:100 !important;}

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

.header-buttons .button {

display: block;

width: 290px;

max-width: 100%;

margin-left: auto !important;

margin-right: auto !important;

}

.header-buttons .left-button {

margin-bottom: 10px;

}

}

.woocommerce .content-area {

margin-left: auto;

margin-right: auto;

float: none;

}

.woocommerce-cart table.cart

.product-thumbnail

{

min-width: 300px;

}

.woocommerce-cart

table.cart img

{

width: 300px;

box-shadow: none;

           }

.footer-widgets .widget-title {

text-align: center;

}

.footer-widgets .widget-title:after {

left: 50%;

margin-left: -25px;

}

.site-info.container{ display:block !important;}

body:not(.home) .header-contact {

background-color: #000 !important;

position: fixed;

z-index: 9999;

width: 1170px;

}

.header-contact {

background-color: #000;

}

.site-header.header-scrolled{left:0px !important;right:0px !important; width:100% !important; }

body:not(.home) #masthead {top:79px;width:1170px;left:auto;}

body.admin-bar #masthead:not(.header-scrolled) {top:100px !important;}

.panel-grid-cell h1,.archive.woocommerce .entry-title{text-align:center;}

.woocommerce ul.products li.product a img{margin:auto !important; text-align:center; width: auto;}

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

.site-header, .site-header.has-header, .site-header.has-slider, .site-header.has-video {

position: relative !important;

background-color: #000 !important;

}

}

.home .header-image {

position: relative;

text-align: center;

width: 100;

height: 100vh;

}

.home .header-info{top:40%;}

@media only screen and (min-width: 0px) and (max-width: 1024px) {

.home .header-info{top:20%;}

body.admin-bar #masthead:not(.header-scrolled)

{top:0px !important;

}

body:not(.home) .header-contact,body:not(.home) #masthead{

width:100% !important;

}

}

.home .site-content {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}

Probably it resides elsewhere either in extra plugin or child theme’s stylesheet. To force disable it, try adding this CSS code to Additional CSS.

#page {
   max-width: 100% !important; 
}

Let me know how it goes.

Regards,
Kharis

Thank you Kharis as always you genius. Could you now help me with this post:

Thanks
Shahan

I replied it already. Thanks!

Regards,
Kharis