Hello everyone,
What I am trying to achieve is that I want all the components in the website to align with the same width, from the header to the sections to the footer.
For clarification please refer to the picture below:
For example in the picture below as you can see the purple line where the header’s width is smaller than the width of the sections (RED LINE). So, is there a way where we can align the header component to the sites sections’ width, so that way it will be more consistent.
URL: Abbasi (abbasigems.com)
PASSWORD: testingpage
Any help and support would be much appreciated.
Thank you.
@justauser
put below css into base.css file(online store->themes->asset->base.css)
main#MainContent {
width: 97% !important;
margin: 0 auto !important;
}
.page-width-desktop {
max-width: 100% !important;
padding: 0px !important;
}
.page-width {
max-width: 97% !important;
margin: 0 auto !important;
padding: 0 1.5rem !important;
}
.image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--16307667828980__16535434406b698872-padding {
max-width: 97% !important;
}
header.header.header--top-center.page-width.header--has-menu {
margin: 0 auto !important;
width: 90% !important;
}
Hi @Ujjaval Thank you for replying, your code worked but it stretched out everything to the max, What I am trying to achieve is just align the header logo vertically equal to the sections, as you can see in the picture below, in the right side where the cart is, very well aligned. The only issue is on the left side where the logo is, it has some space to cover.
Did I make it clear?
haha sorry for the bad explanation
@justauser
.header__icons {
margin-right: 62px !important;
}
header.header.header--top-center.page-width.header--has-menu {
max-width: 77% !important;
margin: 0 auto !important;
}
Like this 
Hello, again @Ujjaval your code worked! it is all in the same width as the rest of the components but is there a way to do it dynamically? rather than giving hard-coded values so that way it’ll adapt even if the screen size is different?