Header resizing and black line

[radiomogul]

I need help to debug a header issue using the Daily Dish theme.

I was able to change the CSS (with some trepidation) to allow my header to be viewed full size, so it looks good on the desktops and the tablets . But it looks tiny on the iPhone.

In addition, there is a black line at the top, where I must have made the header container a few pixels too small.
Can someone please help me figure out how to

1) make the header look larger on the mobile devices, and
2) fix the black line at the top of the header box

URL = http://silopizza.internetfm.com

http://silopizza.internetfm.com

[jbergen]

Hi,

I'm going to go through your questions in reverse order:

2) Do you want to remove the black line above the header? If so, you can go to your child theme's style.css file on line 448 and remove line 450: border-top: 5px solid #222;. So it will look like this:

.site-container {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 40px auto;
padding-left: 60px;
padding-right: 60px;
max-width: 1200px;
}

Or, if you still want the border but you want it thinner, you can change line 450 to something like: border-top: 2px solid #222;

1) To improve how the header looks on an iPhone, you can reduce the padding above and below and also reduce its height so that there's not so much white space.

First, remove style.css, line 2006

The code to remove looks like this:

.site-header {
	padding: 40px 0;
}

And in the same place, add:

.header-image .site-title > a {
    height: 150px;
}

If you want the header image to look even bigger on an iPhone screen, you might want to go back and crop the image a little more tightly.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[radiomogul]

thanks for the info. I took care of the black line (wanted it out.)

as far as the header image, I can't crop it vertically anymore. And like I said, it renders just fine on desktops/laptops, as well as the iPad. It's only the phones, that it looks like it's swimming in the header background.

current image is
http://silopizza.internetfm.com/wp-content/uploads/2014/10/cropped-silo-logo5.png

It is 990 x 315 px

[jbergen]

Glad I could help with the black line.

For the header image, I'm actually suggesting to crop horizontally - not vertically. The code changes I suggested in my previous post would change the display from this:

to this:

If you were to crop the image more tightly horizontally, you would get this:

Jamie

---

Jamie @ Ladebug Studios

[radiomogul]

Yes. That worked. WP appears to have added the ability to skip cropping. That's a huge help to several of my clients migrating large graphics to newer versions of their themes.

[Author]

Posts