Hello! I’ll like to remove the dead spaces in my canopy themed website. Can someone please advise?
I want it to look like this:
Appreciate if someone can advise. Thank you.
This problem can be solved by modifying CSS. Go to assests/base.css and add these code at the bottom:
.header-container .page-header {
display: grid;
align-items: center;
grid-template-columns: 1fr 2fr;
grid-template-areas:“nav toolbar”;
grid-template-columns: 1fr 2fr;
}
.header-container .toolbar-container {
grid-area: toolbar;
}
.header-container .nav-container {
grid-area: nav;
}
Now they’re on the same block and order as expected. You can adjust margin, width, spacing to center things and make them look better. Hope this helps
Hi Kat
That’s great! The solution works great for desktop but not for mobile. The alignment goes way off. Is there a way to apply the changes to the desktop version but keep mobile version as status quo? Thank you so much for your help.
Hi Wendy,
If you want the layout changes for desktop only, replace my code above by this code:
@media screen and (min-width: 750px) {
.header-container .page-header {
display: grid;
align-items: center;
grid-template-columns: 1fr 2fr;
grid-template-areas:“nav toolbar”;
grid-template-columns: 1fr 2fr;
}
.header-container .toolbar-container {
grid-area: toolbar;
}
.header-container .nav-container {
grid-area: nav;
}
}
This is simply just add a responsive breakpoint so the new layout only applies for screen >=750px width. You can change this breakpoint as well. if you want “tablet screen” stay the same just replace"750px" by “900px”.
Hi Kat
It works! I’ve been trying to centralize my logo for hours and am not really sure how to set the grid template 
Will you be able to help please? Thank you so much!