Header image is huge, I made some changes based on other replies, doesn’t work.

  • I reviewed this thread first [Home page menu not visible with Safari on iPad] and collectively thought I found the answer. However still the issue exists. thank you in advance. Dave

    Folks, I was wondering if someone could help me out with this same issue. I don’t know if its from inputting the css incorrectly from your posts or not? I don’t mind on my other pages that my header image isn’t fully displayed, unless there is a way to make that happen as well.

    My main concern is my image on my main page. I just can’t get it to display within the browser nicely. I’d imagine its a parameter somewhere, as I spent hours changing my image to fit, and I realize I am completely off and need to make the change from the coding side.

    Since this was posted as resolved, I didn’t know if I needed to open a new post or not for the same issue. thank you very much Dave

    https://hgraceconfections.com is my site and here is my child theme style.css

    here is my child style.css
    /*
    Theme Name: Twenty Seventeen Child Theme
    Theme URI: https://hgraceconfections.com
    Author: Dave Romesburg
    Author URI: https://hgraceconfections.com
    Template: twentyseventeen
    Description: Child theme for Twenty Seventeen.
    Version: 0.1
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    Tags:
    Text Domain: twentyseventeen-child
    */
    @media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-media,
    .twentyseventeen-front-page.has-header-video .custom-header-media,
    .home.blog.has-header-image .custom-header-media,
    .home.blog.has-header-video .custom-header-media {
    height: 1000px;
    height: 80vh;
    }
    }
    function childtheme_custom_header_setup() {
    add_theme_support( ‘custom-header’, apply_filters( ‘simpleseventeen_header_args’, array(
    ‘height’ => 237,
    ) ) );
    }
    add_action( ‘after_setup_theme’, ‘childtheme_custom_header_setup’ );

Viewing 5 replies - 1 through 5 (of 5 total)

  • I had the problem of the header image zoomed in and clipping off content even though the photo was scaled to the recommended dimensions. I noticed that the image sits behind the administrator bar at the top of the screen and the menu bar below. Removing either of these if possible may add more visibility. After just blindly hacking away at a solution, I arrived at this solution which seems to work for my needs. I added this to the “additional CSS” option under the “customize” menu:

    div#wp-custom-header.wp-custom-header img {height: 100%;object-fit: fill }

    Thread Starter dromesburg

    (@dromesburg)

    cj thank you so much! I appreciate your solution, however I would prefer not to lose the content navigation I already have defined. There has to be a definitive way to reduce the image header and still retain what I am looking for.

    Again, THANK YOU !!!!!
    Dave

    I tried viewing the page in my browser web inspector. I disabled the “max-width” setting for the “has-header-image” selector which is at 1000% and the image reduced in size but less than the header dimensions. If the header background color was white, it would blend in with the rest of the page making the header image appear centered and complete.

    Thread Starter dromesburg

    (@dromesburg)

    Thank you cjbergin.. I don’t know if I want to change my image over to a white background, though I appreciate the testing and suggestion for the settings. Since it’s part of the nostalgia, I don’t want to lose that with changing the background of the image. I am maybe going to browse around a bit more. There has to be a way to reduce the header image and make it fit nicely within the WP theme. Maybe I missed other posts, so after this weekend, I will start browsing around more. Thank you once again! Dave

    Thread Starter dromesburg

    (@dromesburg)

    Folks, not sure what I am missing here.. I changed my child theme css to simply the default and removed the code I had above. Not sure why this problem exists for my wordpress site. The image is enormous, and gets cut depending on where I am viewing it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header image is huge, I made some changes based on other replies, doesn’t work.’ is closed to new replies.