Wordpress Style.css Header error

Question

I am currently working on a website and for some reason i'm baffled to the size of the logo/banner because the only option for the theme is to import a logo and use that. i uploaded the banner and i want it to go straight across and fit perfect? can anyone help me

The website is here! [CLICK ME]

Here's the style.css CLICK ME TO GO THE PASTEBIN

 The code is more than the character limit

Please can anyone help me?

Thanks.

Yes. i've got round that but on the mobile version of the website it goes all funny. Please can you help me — bcz, Aug 26 '18 at 09:12
You've put the logo inside the h1 tag get the image outside the h1 tag — Viira, Aug 27 '18 at 07:08
I have removed it from the
Tag and it still doesnt fit the whole screen — bcz, Aug 27 '18 at 10:53
That's because of the bootstrap classes, ok now tell do you want to fit the image on the div or partially filled? — Viira, Aug 27 '18 at 10:55

score 0 · Answer 1 · answered Aug 25 '18 at 13:31

0

Was Messing Around with the CSS you provided. The container the header image is in is called navbar-brand. In the CSS Ctrl+F and find it

add this snippet and it should do what you want.

.navbar-brand{
   width: 435% !important;
}

Now if change the size of your header image you're going to have to change the width percentage to match the new size with the header.

answered Aug 25 '18 at 13:31

J.Diaz

1
2

yeah in the css file you provided. Just use Ctrl+ F to search for ".navbar-brand" – J.Diaz Aug 25 '18 at 20:16
There is an big big bug! Please help the nav bar goes through the banner! – bcz Aug 25 '18 at 21:52

score 0 · Answer 2 · answered Aug 25 '18 at 15:25

There are two ways to tackle this issue, one make your navbar column to col-sm-12 this way the width of the container will be 100% and it will take full width automatically. Because currently it's getting col-sm-4 which means 33.33%.

Adding width more than 100% never a good practice, you can add this code in your style sheet for second option.

.navbar-brand {
    width: 1140px !important;}

score 0 · Answer 3 · answered Aug 27 '18 at 11:04

0

That's because your logo was stuck between the h1 tag
After you remove it from the h1 the default bootstrap classes comes with the default padding and margin.

Add this

.navbar-brand
{
padding:0;
margin:0;
}

and remove the bootstrap class col-sm-3 because .col-sm-3 only occupies the 25% of the space

since you need it to be fill the screen use col-sm-12 it will occupy the 100% of the page.

To know more about bootstrap grids see here: https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

And also bootstrap grids comes with default padding. Remove the padding to fit the screen

Add this

.col-sm-12
{
padding:0;
}

.row
{
margin:0;
}

You'll have your image full sized now. Hope I helped.

answered Aug 27 '18 at 11:04

Viira

3,805
3
16
39

add these in your style.css file – Viira Aug 27 '18 at 11:08
And where should i remove the .col? and remove the .col – bcz Aug 27 '18 at 11:11
see above navbar-brand class there is class named
change that to
– Viira Aug 27 '18 at 11:13
Urm... The image is full size but it goes through the navbar... http://nettdesign.co.uk – bcz Aug 27 '18 at 11:24
recheck your html structure mate. – Viira Aug 27 '18 at 11:44
To me everything looks fine. – bcz Aug 27 '18 at 11:46

Wordpress Style.css Header error

Tag and it still doesnt fit the whole screen

3 Answers3