Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header resizing and black line
Tagged: css, Daily Dish, Header Images
- This topic has 4 replies, 2 voices, and was last updated 9 years, 1 month ago by
radiomogul.
-
AuthorPosts
-
October 11, 2014 at 12:01 pm #127485
radiomogul
ParticipantI 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 to1) make the header look larger on the mobile devices, and
2) fix the black line at the top of the header boxURL = http://silopizza.internetfm.com
http://silopizza.internetfm.comOctober 11, 2014 at 2:32 pm #127495jbergen
MemberHi,
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
October 11, 2014 at 2:52 pm #127499radiomogul
Participantthanks 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.pngIt is 990 x 315 px
October 11, 2014 at 3:23 pm #127506jbergen
MemberGlad 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
October 12, 2014 at 4:01 pm #127592radiomogul
ParticipantYes. 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.