Hi all,
I’ve created a very simple header with header logo and menu/search from a blank header cloud template. I’m pretty good at code, but often bumble around until I find with CSS.
I’m having a lot of trouble centering it. I have it set to 1200px (to match the page content) and centered horizontally. The zone is centered and set at 100% as well. I’ve tried margins being auto, etc, but can’t find the magic setting.
Since it’s in the works in the tag div cloud editor I can’t share a link but have this image.
I’m grateful for any help!
Karin
Hello Karin,
Please let me know how you create the header, did you import a blank header template from tagDiv Cloud Library?
Also, please check each element and row/column, maybe you set some margin/padding and because of this, you cannot set it in the centre. Please provide a video with your settings on the header.
A solution for sending a screenshot/video is this:
Download, capture, send: https://www.techsmith.com/jing-tool.html
After making the screenshot, you will have a link, paste it here.
Thank you!
Thanks so much for this. I went really slow rebuilding it checking when the alignment would get messed up. I think I got it centered, but unfortunately one last thing is driving me up the wall is that I can’t get it to match the content width.
I’ve set the content width to 1200 in the theme panel, and the header 1200. But it does not match on my screen. which could be a browser thing? Finding a percentage is proving really hard.
My final question is how can I make the header and content width match! So sorry for all the questions! I promise this is the last one!
Karin
Hello,
If you want to make the website boxed, you need to have set a background image/color from Theme Panel -> Background => https://i.imgur.com/i2qlhzX.png and Theme Panel -> Theme Colors => https://i.imgur.com/h808nlK.png and enable the option to make the background boxed layout. Select the row on the header and footer and set the option for “Row stretch” on Default => https://www.screencast.com/t/I7lDMXJjiwZ -> https://www.screencast.com/t/O8cc7n4ZzIc
Thank you!
Thank you as always for these detailed and easy to follow instructions! I think I lied about my last question!
Hopefully this is the last. I followed your instructions. My template settings for page width is set to default (if that is helpful info), the row for the header set to “stretch row”, and the boxed site settings are as you have indicated, but still am having two bits of trouble. I can’t seem to resolve a few pixels on each side, as you can see in this photo. I’ve tried a few different configurations where I can add padding in pixels or percentages, but this always breaks the responsiveness of it at smaller screen sizes.
I can add paddings to match it, if I use the “stretch to 1200 content” option, but then this breaks the responsiveness of the site.
Thanks again!
Karin
Hi kjervert,
If the header row and the content row are set on default and you have set the boxed option it should look like this -> https://i.imgur.com/VmoIVhB.jpg please check if you do not have set some margins on the row from header -> https://i.imgur.com/G2GmSbc.jpg
Thank you!
Hey Calin,
thank you so much for this. I think there might be some mystery padding in the content section, but I don’t know where this setting might be located. I’ve checked the content section rows, columns, everything for padding anywhere, but I don’t see any.
I’m wondering, too if the footer is somehow causing this issue as well.
Karin
Hi kjervert, if you want we can take a closer look, but for this we need to login on your website. If you agree with this, then please make a full backup and contact us via email at contact@tagdiv.com and provide wp-admin access. Please include the link of this topic to can identify you. We’ll check it as soon as possible.
Thank you!
Thanks Calin, we figured a work around and are all set. Thanks for all your help! Much appreciated.
Karin
