• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Header resizing and black line

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header resizing and black line

This topic is: not resolved

Tagged: css, Daily Dish, Header Images

  • This topic has 4 replies, 2 voices, and was last updated 9 years, 1 month ago by radiomogul.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 11, 2014 at 12:01 pm #127485
    radiomogul
    Participant

    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
    October 11, 2014 at 2:32 pm #127495
    jbergen
    Member

    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

    October 11, 2014 at 2:52 pm #127499
    radiomogul
    Participant

    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

    October 11, 2014 at 3:23 pm #127506
    jbergen
    Member

    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:

    Before removing whitespace

    to this:

    Whitespace removed

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

    Horizontal cropping

    Jamie


    Jamie @ Ladebug Studios

    October 12, 2014 at 4:01 pm #127592
    radiomogul
    Participant

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble