- This topic has 15 replies, 3 voices, and was last updated 9 years, 10 months ago by
Tom.
-
AuthorPosts
-
March 12, 2015 at 1:52 am #85629
Carlos Paramio
Hi Tom,
I’ve put a 2600×459 image as header through Widgets>Header but it shows to the right and only half way across the page, thought site is set as 1280px width in Customizer.I’ve done a search in the forum and have added this CSS:
.header-widget { float: none; max-width: 100%; }
Now the image fills the entire space in header but there’s still some margin to the left and to the right of the screen. I’ve tried adjusting margin and padding with no effect.
Thank you
March 12, 2015 at 8:35 am #85771Carlos Paramio
I’ve realized the space at sides appears because the difference between container width and screen resolution (1280px vs. 1366px)
There’s still a small gap between header and navbar
March 12, 2015 at 9:22 am #85801Tom
Lead DeveloperLead DeveloperWhy not just upload it as a header through the “Header Content” area of the Customizer?
If you need to use the header widget for some reason, can you link me to the site so I can see the gaps?
Thanks!
March 12, 2015 at 12:35 pm #85889Carlos Paramio
Oh man, I have designed like a million of headers in the past 2 months
But none of them have won my boss heart, so to speak
In the past you kindly helped me with a logo floating above the background image but it was not well received, then I tried a lot of things, until I added the image through Header Content.
It looks right for him (hurray!), but image gets the container width set in Customizer, so when you’re browsing the site in a wider screen there’s some blank gaps left and right.
In short: Is there any way to make the image (through Header Content) to expand throughout the screen, the same way menu does?
(Customizer>Design>Header Desing doesn’t behavoir like Customizer>Design>Nav. Design ??)Excuse me for sharing my headaches with you
March 12, 2015 at 12:36 pm #85891Carlos Paramio
oh, and http://www.unedtalavera.es
remember you need to login to browse the site
March 12, 2015 at 11:02 pm #86003Tom
Lead DeveloperLead DeveloperThis CSS should do the trick:
.inside-header.grid-container { max-width: 100%; } .inside-header.grid-container img { width: 100%; }
March 13, 2015 at 1:38 am #86078Carlos Paramio
Good morning
What a simple solution for my big problem!Are both lines necessary? It seems to work with just first one (the header it’s just a JPG file, nothing more finally)
Thank you Tom
March 13, 2015 at 9:12 am #86347Tom
Lead DeveloperLead DeveloperThe second line forces the image to be 100% width of your browser.
Glad I could help 🙂
March 19, 2015 at 8:28 am #88690Carlos Paramio
Tom, I’m terribly sorry to open this one again
I’ve deleted all the images used for testing, and have started creating a new headerSo I’ve uploaded a 1085×200 JPG image through Header Content/Logo and it doesn’t fill the entire width of the navbar (1280px).
both lines of CSS are there but it doesn’t work today… 🙁March 19, 2015 at 1:07 pm #88827Tom
Lead DeveloperLead DeveloperThis part of the code will force the image to be 100% of the container:
.inside-header.grid-container img { width: 100%; }
If that’s not working, I’ll need to take another look at the site to check out the added CSS.
March 20, 2015 at 12:33 am #88949Carlos Paramio
Yes, please come in and take a look
http://www.unedtalavera.esMarch 21, 2015 at 12:11 am #89295Tom
Lead DeveloperLead DeveloperAh okay – this is the full working CSS:
.inside-header.grid-container { max-width: 100%; } .inside-header.grid-container img { width: 100%; } .site-logo { display: block; }
March 23, 2015 at 8:35 am #90294Carlos Paramio
Thank you, this new CSS works perfectly!
March 23, 2015 at 10:56 am #90360Tom
Lead DeveloperLead DeveloperAwesome 🙂
June 12, 2015 at 6:17 pm #114236zahed
Dear ,
Please look in to my site. i want to show my site logo and header widget on the same vertical alignment. but it is up and down
please help
-
AuthorPosts
- You must be logged in to reply to this topic.