[Resolved] Image alignment in Widget Header

Home Forums Support Image alignment in Widget Header

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #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

    #85771
    Carlos 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

    #85801
    Tom
    Lead Developer
    Lead Developer

    Why 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!

    #85889
    Carlos 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

    #85891
    Carlos Paramio

    oh, and http://www.unedtalavera.es

    remember you need to login to browse the site

    #86003
    Tom
    Lead Developer
    Lead Developer

    This CSS should do the trick:

    .inside-header.grid-container {
        max-width: 100%;
    }
    
    .inside-header.grid-container img {
        width: 100%;
    }
    #86078
    Carlos 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

    #86347
    Tom
    Lead Developer
    Lead Developer

    The second line forces the image to be 100% width of your browser.

    Glad I could help 🙂

    #88690
    Carlos 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 header

    So 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… 🙁

    #88827
    Tom
    Lead Developer
    Lead Developer

    This 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.

    #88949
    Carlos Paramio

    Yes, please come in and take a look
    http://www.unedtalavera.es

    #89295
    Tom
    Lead Developer
    Lead Developer

    Ah 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;
    }
    #90294
    Carlos Paramio

    Thank you, this new CSS works perfectly!

    #90360
    Tom
    Lead Developer
    Lead Developer
    #114236
    zahed

    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.