Need CSS Help With Logo

sharingsunshine
sharingsunshine used Ask the Experts™
on
I have an image on this website http://www.henricomg.org/garden-advice/ that I have created as the logo.  Underneath the image between the bottom of the butterfly image and the navigation bar there is a thin white line.

What is the css to get rid of that white line?

I have tried negative values on margin-bottom but it still didn't work.

Thanks,
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Shinesh PremrajanEngineering Manager

Commented:
Try this
<img width="700" height="301" src="http://www.henricomg.org/wp-content/uploads/2019/09/hmga-butterfly-logo-1024-1.jpg" class="header_logo header-logo" alt="" style="height: 143px !important;">

Hope this helps!

Author

Commented:
this is a wordpress site cms. So where would I put this?
In the theme there is .header-main {
    height: 301px;
}
change the height to a smaller number
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Terry WoodsIT Guru
Most Valuable Expert 2011

Commented:
If you don't want to edit the theme, you can add custom CSS that will survive theme updates.

In recent versions of WordPress, you can do this by going to Appearance > Customize > Additional CSS and adding your CSS. This CSS worked for me in Firefox:
@media screen and (min-width: 850px) {
  .header-main {
     height: 297px;
  }
}

Open in new window


There are some difference issues with the header on smaller screen sizes, if the responsiveness tools in Firefox are behaving correctly.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
There are a number of things that are causing this.
The logo has this style
#logo {
	margin-bottom: -157px;
}

Open in new window

So a quick fix would be to just change the margin to this
#logo {
	margin-bottom: -161px;
}

Open in new window

The reason for the negative margin is because of these two styles
div#masthead {
	margin-top: -160px;
}
.header-main {
	height: 301px;
}

Open in new window

So another option would be to apply these fixes
div#masthead {
  margin-top: initial;
}
.header-main {
  height: auto;
}
#logo {
  margin-bottom: initial;
}

Open in new window

Both of these options would need to go in your custom CSS after any of the styling of elements they are targeting.

Which one you use will have to be a case of trial and error. The first should fix the problem with minimal impact. Personally I don't like code that does not make sense and moving things around with negative margins is usually a sign of bad design - I would probably go to the cause and fix that - but that might result in side-effects - so I leave it to you to decide which is best.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Caveat to the first option above - changing the logo height won't fix the problem as the the height of the image is not sufficient.
So you would need to do this
div#masthead {
   height: 300px;
}
#logo {
	margin-bottom: -161px;
}

Open in new window


As I said this is the quick and dirty. My preference is the second option subject to checking for side effects

Author

Commented:
Thanks to everyone who responded.  I took the answers in order and the answer from Robert Granlund solved the problem.
Terry WoodsIT Guru
Most Valuable Expert 2011

Commented:
You might find that without the media query, your chosen solution breaks the header on mobile sized devices.

Author

Commented:
Hi Terry, I don't have an ipad or tablet but I did check it on my phone.  Did you see it break on a tablet?
Terry WoodsIT Guru
Most Valuable Expert 2011

Commented:
I was using the responsiveness tools in Firefox, which aren't always perfect, but I did see it break using those. I just tested it using my Samsung S7, and I got a similar result.

When I say "break", the image reduced in size where I felt that it shouldn't have. Perhaps compare mobile size with and without the new CSS?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I can replicate the "break" with Firebox RDM.
I just tried with the fixes I proposed above which seem to fix the problem
div#masthead {
  margin-top: initial;
}
.header-main {
  height: auto;
}
#logo {
  margin-bottom: initial;
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial