1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to make the image fit the whole header space?

Discussion in 'Web Design' started by iwwe22, Nov 26, 2014.

  1. iwwe22

    iwwe22 Newbie

    Joined:
    Nov 6, 2014
    Messages:
    9
    Likes Received:
    0
    Hi

    I'm a very new to CSS and Wordpress in general, my question is: How do I make the image on my header fill the whole width space?
    I did found the code that removed the padding from image to menu and from image to top of the page. But the image is still centered while maybe 30% of right and left is still not covered by the image even though the image is 1080 in width.

    Is there anything that should be removed or edited in code as maybe sidebar and/or support.text that maybe is occupying that space?

    I'm using the Vantage theme

    Showing you how I mean as I can't show you any image I guess?
    =====================================================
    ----------------------------IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII------------------------------
    ------Area not covered----IIIIIIIIIIIIII[IMAGE]IIIIIIIIIIIIII-----Area not covered-------
    ----------------------------IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII------------------------------
    =====================================================
    MENU
    =====================================================

    Thanks for any answers provided!
     
  2. Grobarcina

    Grobarcina Newbie

    Joined:
    Nov 6, 2014
    Messages:
    19
    Likes Received:
    2
    Anyone got any idea?
     
  3. fairytail0000

    fairytail0000 Junior Member

    Joined:
    Oct 4, 2014
    Messages:
    163
    Likes Received:
    18
    hey sorry for asking this , i am wondering how to post question in this forum? i cant find it any help will be appreciated thanks!
     
  4. FBGuru

    FBGuru Senior Member

    Joined:
    Sep 22, 2013
    Messages:
    928
    Likes Received:
    1,171
    Location:
    Personality Type : ESTP
    I see a couple of Wordpress themes with that name. Which Vantage theme are you talking about?

    Code:
    http://vantage-shopify-theme.myshopify.com/
    http://demo.siteorigin.com/vantage/
    
     
  5. Grobarcina

    Grobarcina Newbie

    Joined:
    Nov 6, 2014
    Messages:
    19
    Likes Received:
    2

    Its the Site origin one, we work together so I know hehe.

    Btw Wordpress is useless when it comes to simple tasks as this, needing to edit code and such is just plain stupid, and all themes having different options. wordpre:rocketwho
     
    • Thanks Thanks x 1
  6. MrBlue

    MrBlue Senior Member

    Joined:
    Dec 18, 2009
    Messages:
    950
    Likes Received:
    662
    Occupation:
    Web/Bot Developer
    There's probably a div container that's forcing the right and left margins. In Chrome and Firefox you can inspect the element(s) in question in order to find the corresponding css.
     
    • Thanks Thanks x 2
  7. Arditkallaba

    Arditkallaba Registered Member

    Joined:
    Sep 1, 2014
    Messages:
    93
    Likes Received:
    29
    Occupation:
    24/7 job as a asshole
    Location:
    Norway
    Nahh. Screenshot the place, make the header right. Go into Appearance, go to theme settings, remove "stretch" mark and It should go. If thats not working, go to advanced in the meta slider and it will say there. Remember to have right widht and height.

    Goodluck.
     
    • Thanks Thanks x 2
    Last edited: Nov 26, 2014
  8. iwwe22

    iwwe22 Newbie

    Joined:
    Nov 6, 2014
    Messages:
    9
    Likes Received:
    0
    What are you suppose to inspect when you inspect elements? We cannot seem to find, we can only find the body and and the navigation bar at the top :(

    Our image is not a meta slider. We used theme settings and chose the tab "Logo" and replaced the logo image with our own image. There seems to be something restricting the right and left side of the header making it impossible to expand the image to full width. Is it possible to put an image on the header area using meta slider? Will the meta slider also fill out the empty spaces to the right and left of the meta slider "image". If so, please explain it to us like we were a 10 year old child since we are complete noobs when it comes to WordPress, CSS, etc.

    We thank you both for the replies!
     
  9. yalokin

    yalokin Junior Member

    Joined:
    Apr 4, 2014
    Messages:
    119
    Likes Received:
    38
    It's hard to modify some header classes because they are used on other elements too, but check if this works:

    NOTE: BACKUP YOUR FILES BEFORE TRYING!

    Code:
    [B]CSS in style.css:[/B] 
    
    header#masthead hgroup img {
        height: auto;
        max-width: 100%;
        width: 100%; <<< ADD THIS
    }
    
    
    header#masthead hgroup {
        margin-bottom: 40px; <<<<< REMOVE THIS
        margin-top: 20px; <<<<< REMOVE THIS
        position: relative;
    }
    
    
    Code:
    [B]HTML [probably in header.php]:[/B]
    
    FIND CODE THAT LOOKS LIKE THIS:
    
    <hgroup class="full-container">
        <a class="logo" rel="home" title="Vantage Demo" href="http://demo.siteorigin.com/vantage/"><img width="181" height="40" src="http://demo.siteorigin.com/vantage/wp-content/themes/vantage/images/logo.png"></a>
        <div class="support-text">
            Call me! Maybe?        </div>
    </hgroup>
    
    AND REMOVE THE CLASS AND THE DIV THAT SAYS "call me Maybe" SO IT LOOKS LIKE THIS:
    
    <hgroup>
        <a class="logo" rel="home" title="Vantage Demo" href="http://demo.siteorigin.com/vantage/"><img width="181" height="40" src="http://demo.siteorigin.com/vantage/wp-content/themes/vantage/images/logo.png"></a>
    </hgroup>
    
    
    
    Don't copy paste the html, its just for example. Good luck!
     
    • Thanks Thanks x 2
    Last edited: Nov 26, 2014
  10. iwwe22

    iwwe22 Newbie

    Joined:
    Nov 6, 2014
    Messages:
    9
    Likes Received:
    0
    Thanks for the help but none of the lines existed in our code. I would gladly link the code but I am not allowed to link codes nor any image.

    Some restrictions are annoyingly restricting.


    Wordpress is depressing.
     
  11. FBGuru

    FBGuru Senior Member

    Joined:
    Sep 22, 2013
    Messages:
    928
    Likes Received:
    1,171
    Location:
    Personality Type : ESTP
    You don't have to touch any css codes. Simply open the functions.php in the Wordpress editor and find and replace all 3 1080's with your desired screen size.

    Here's a little screencast tutorial for you.

    Code:
    http://screencast-o-matic.com/watch/c2XOFkerQ8
    
    P.S. It may break any other images you upload to a page/post.
     
    • Thanks Thanks x 2
  12. iwwe22

    iwwe22 Newbie

    Joined:
    Nov 6, 2014
    Messages:
    9
    Likes Received:
    0
    We are extremely grateful for you taking the time to show us through a video how to do this! A Lannister always pays his debts ;)

    We did as you instructed but a problem still remains, the image expanded on the right side and seems to have pushed through the boundaries. And this is probably because the left side still has something restricting it.

    Due to not being able to link images, here goes our beauty of editing skills:


    ======================================
    --------------------IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII=IIIIIIIIIIIIIIII
    --------------------IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII=IIIIIIIIIIIIIIII
    Still restricting----IIIIIIIIIIIIIII[IMAGE]IIIIIIIIIIIIIIIIIIIIIIIIII=IIIIIIIIIIIIIIII <----- Part of image being "pushed" out
    --------------------IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII=IIIIIIIIIIIIIIII
    ======================================
    MENU---------------------------------------------------------=
    ======================================
     
  13. FBGuru

    FBGuru Senior Member

    Joined:
    Sep 22, 2013
    Messages:
    928
    Likes Received:
    1,171
    Location:
    Personality Type : ESTP
    It must be the modifications you've done already like removing padding/margin on the css. Try resetting them. You can also open the stylesheet.css in the Wordpress editor and copy and paste the original css codes from the theme's zip file.
     
  14. Grobarcina

    Grobarcina Newbie

    Joined:
    Nov 6, 2014
    Messages:
    19
    Likes Received:
    2
    Damn guys, love the love shown by BHW shown so far!

    As Iwwe said, a Lannister always pays his debt ;)


    We are close to fixing this so useless problem, been itchin our sides for 2 days lol.
     
  15. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,364
    Likes Received:
    5,425
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    Hmm I'd say CSS is definitely the easiest way of sorting this out. If you reset the changes you've made so far, and PM me your link, I'll help you out.
     
    • Thanks Thanks x 1
  16. Grobarcina

    Grobarcina Newbie

    Joined:
    Nov 6, 2014
    Messages:
    19
    Likes Received:
    2
    We are going to do that right away, as we both are new to the forums I think we are restricted and not able to PM?
    To bad though I do have an old account from my young days but got no clue of the email or name.
     
  17. Grobarcina

    Grobarcina Newbie

    Joined:
    Nov 6, 2014
    Messages:
    19
    Likes Received:
    2
    The issue still remains, will add you on list. skype: iwwe22