How to make the image fit the whole header space?

[iwwe22]

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!

 

[Grobarcina]

Anyone got any idea?

 

[fairytail0000]

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!

 

[FBGuru]

I see a couple of Wordpress themes with that name. Which Vantage theme are you talking about?

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

 

[Grobarcina]

I see a couple of Wordpress themes with that name. Which Vantage theme are you talking about?
[/CODE]

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

 

[MrBlue]

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.

 

[Stagged]

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.

 

[iwwe22]

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.

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

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.

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!

 

[yalokin]

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!

[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;
}

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

 

[iwwe22]

It's hard to modify some header classes because they are used on other elements too, but check if this works:

Don't copy paste the html, its just for example. Good luck!

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.

 

[FBGuru]

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.

http://screencast-o-matic.com/watch/c2XOFkerQ8

P.S. It may break any other images you upload to a page/post.

 

[iwwe22]

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.

P.S. It may break any other images you upload to a page/post.

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---------------------------------------------------------=
======================================

 

[FBGuru]

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.

 

[Grobarcina]

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.

 

[Conor]

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.

 

[Grobarcina]

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.

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.

 

[Grobarcina]

The issue still remains, will add you on list. skype: iwwe22