Support » Theme: Twenty Seventeen » Where is header img width defined?

  • Resolved WPOso

    (@wordpress-oso)


    The header images on all my WordPress sites look fine on a big screen, but they aren’t responsive; they look like crap on small screens.

    I finally decided to fix it, but am amazed at how hard it is. I’ve applied CSS to the head image, each of its containers, various combinations thereof, etc. with no luck. I tried a header image plugin and it instructed me to create a menu(?)!

    Then I discovered the problem: The width and height are hard-wired into the image: width=”2000″ height=”1200″.

    So it looks like I need to find the file that defines that width and change it there. But I haven’t been able to search for it, either because there are too many hits to sort through, or there’s some special coding that I don’t know how to search for.

    So can anyone tell me where the header image’s width and height are defined? I want to replace it with “width: 100%” to make it responsive.

    I’m using the twenty seventeen theme on some of my sites.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Just a quick q: are you using the Additional CSS in the Appearance Customizer to make your changes?

    In your Web Inspector Console, concentrate on the CSS documents to find this element and parameter. In style.css you’ll find a section like so:

    13.2 Front Page
    --------------------------------------------------------------*/
    
    .twentyseventeen-front-page .site-content {
    	padding: 0;
    }
    
    .twentyseventeen-panel {
    	overflow: hidden;
    	position: relative;
    }
    
    .panel-image {
    	background-position: center center;
    	background-repeat: no-repeat;
    	-webkit-background-size: cover;
    	background-size: cover;
    	position: relative;
    }
    

    I’d try changing the .panel-image parameters from within the Additional CSS customizer, which will show you a live preview before you Publish. If that doesn’t work, someone else can take a stab at it…

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The issue won’t be because of HTML width and height attributes. I fear you may have a disagreement with the way the header image is cropped and does not respect your focal points in the image. Changing that is a big deal and I don’t think it’s worth the effort.

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using a focal point plugin to keep the parts of the image in view that you want https://wordpress.org/plugins/wp-smartcrop/

    WPOso

    (@wordpress-oso)

    Thanks for all the tips. I’ll check’em out now.

    WPOso

    (@wordpress-oso)

    Well, I tried the CSS fix, changing background-size from “cover” to “100%”. That didn’t work.

    I then installed WP-Smartcrop, but I can’t begin to understand the instructions. What’s a “focal point”? All I want is a RESPONSIVE image – one that spans the screen, regardless of screen size.

    When I access Customize > Header Image, there’s no prompt to enable Smartcrop.

    I haven’t inserted any images in the body of my pages yet, but I just wondered if they’re all rigid, like the header image. What’s the point of having a website that can’t be displayed in iPads and smart phones?

    Thanks.

    WPOso

    (@wordpress-oso)

    I figured out how to enable Smartcrop by uploading a new image. However, all it does is ask me if I want to crop it. I don’t want to crop it. I want to make it responsive.

    WPOso

    (@wordpress-oso)

    For anyone reading this thread, I finally found a solution:

    1. Go into your admin panel and choose to NOT display a header image

    2. Open the file header.php and manually insert a link to your header image, styling it at width: 100%.

    3. If you don’t want it to display on every page, use CSS to make it display only on the home page (or on every page except the home page).

    4. The top of the header image won’t display because of the empty header div. Simply use CSS to not display the header div (display: none). Of course, this means you won’t have a top title in h1 tags or a menu. You can probably work around this pretty easily if you display this customized image and nix the header only on the home page.

    5. When you upgrade to the next WordPress theme version, you may have to repeat the exercise.

    UNLESS you are using a child theme to make these changes.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Where is header img width defined?’ is closed to new replies.