We’re in the process of building out our company webpage and we’re using the Growth theme. Right now we’ve got a logo (aligned “logo left”) in our global header, and I’d like to align the left edge of the logo with the left edge of the text column in our Main Section (currently using the Hero banner module), but the logo is aligned too far towards the center of the screen.
Once we align the left edge of the logo with the left edge of the text in the Hero banner module, I’d also like to lock it in place so that if we resize the window, the logo maintains its position.
I’ve created a child theme (we’re still using the parent growth theme), but have no clue what CSS to add. Help!
If you try re-sizing your window, you’ll see that the logo shifts across the header from right-to-left - once it’s aligned, I’d like to lock it in place so that it remains aligned with the column in the hero banner below.
After looking at your page I found that your header container has max-width property and your text section does not, so for bigger screen sizes your text section’s width increases but your header stops at 1200px. To fix this you can either remove the max-width from your header container or you can give max width to all your section. I would suggest the second option as it is best practice. Also when you need to add same amount of right & left padding to your header section as per your text section , currently it is 50px.
Gaurav - really appreciate your help here. I’ve confirmed that the text section is full width (Awesome Screenshot) - this defaults to 20px padding on the left and right. I’ve re-confirmed that the global header is set to full width, and I’ve mirrored the 20x left padding (Awesome Screenshot) - however, when I update the page, the logo is still not properly aligned (Awesome Screenshot) - is there something I am still missing?