McKinley Header Image Insanely Cropped on Mobile

  • Unknown's avatar
    suitecg · Member ·

    I just moved my site in to the McKinley theme and so far I’m really liking it. I’ve been able to do a few small customizations to it but I have a few issues that go beyond my limited CSS knowledge.

    First, my header image is insanely cropped on my iPhone. More than 3/4 is missing. I have applied this CSS, thinking it would help, but it has not. I feel like I’m missing something very basic:

    #masthead.site-header {
	height: 275px;
}

    The smaller issues:

    1. Is there any way to get the navbar to center horizontally?

    2. I’d like to decrease the margins in the main content area.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    suitecg · Member ·

    When I look at the page in a CSS inspector, I notice that all “height” attributes are crossed out. But I can’t seem to find a parent element that is overriding those settings.

  • Unknown's avatar
    suitecg · Member ·

    Got it! min-height.

    Any tips on the other two questions are appreciated!

  • Unknown's avatar
    suitecg · Member ·

    I got the margin issue fixed and am just down to getting the nav bar to center. Not a big deal if it can’t be done.

    Actually, I have one new issue. I have ONE link in the nav bar that would be great to have a different color. I’m not sure if it can be done since, if I understand CSS correctly, I need to assign it a new class, and I don’t have that level of control in a WordPress.com site. I’ve tried a few ways of forcing the text color but it keeps getting overridden. My hunch is that it cannot be done, but if anyone has any ideas on what to try, I’d certainly appreciate it.

  • Unknown's avatar
    thesacredpath · Member ·

    The nav is actually set for center, but it has a right padding on the ul element of 40px on it. The following will remove that 40px on the right. 

    ul.nav-menu, div.nav-menu > ul {
    padding-right: 0;
}

    We can definitely change the color on a single nav menu item using the unique nav menu item CSS class. You didn’t mention which menu item you wanted to change the color on, so I’m going to give you the code for Customer Portal and explain how to find the unique id for the one you want to change. 

    #menu-item-997 a {
    color: #44ee00;
}

    If you inspect the menu item, you will find something like this in the li element for that menu item
    <li id="menu-item-997" class="menu-item....
    You use the “id”. CSS ids are preceded with a # when you write CSS rules while CSS classes are preceded with a period ( . ).

    Let me know if you have any issues or additional questions.

  • Unknown's avatar
    suitecg · Member ·

    Perfect, and more perfect! Yes, it was the customer portal item that I wanted a different color. I had tried code almost identical to that but left out the “a” in the first line.

    One last question for the time being. Is it possible to add copyright information in the the site.info section? I have it in a footer widget right now but would prefer it be down there with the theme name and WordPress link. I’m guessing it can’t be done since that is content instead of style, but I read somewhere on the forum that it can be done, although it never explained how. It may have been that specifc theme had an option for that… I really don’t know.

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Is it possible to add copyright information in the the site.info section?

    Absolutely that is doable. We can use the “before” pseudo selector to add the copyright above the existing credits.The first rule below makes the existing footer credits a bit darker and the second adds the copyright centered above the existing credits, increases the size slightly and sets it to bold. You can edit and play with the styling as desired. 

    .site-info a {
    color: #777;
}
.site-info:before {
    content: "My Copyright";
    display: block;
    text-align: center;
    color: #fff;
    font-size: 110%;
    font-weight: bold;
}

    See what you think.

  • Unknown's avatar
    suitecg · Member ·

    My Reaction Here

    Awesome! Thank you so much!

    Interestingly, the custom code did not show up in the WP editor. I had to publish the change and view it live on the site to see if it worked. But it DID work!

    Thanks again!

  • Unknown's avatar
    thesacredpath · Member ·

    Heh, great reaction. :)

    To get the real-time preview of changes, some pretty complex code is used and it doesn’t go through the normal browser rendering, so once in a while something will not show up in CSS Preview, but will after you save and view your actual site.

  • Unknown's avatar
    suitecg · Member ·

    I noticed that on my pages with featured images, the featured image shows up as a page banner. But Category list pages like “Announcements” have a more basic background with text (although the post’s featured image shows up as a “post banner” if you will . I see no way of assigning a featured image to a Category, but can this be done with CSS customization?

  • Unknown's avatar
    thesacredpath · Member ·

    Are you wanting a different header image on each category, or just one image on all categories? Given that the header image on category pages is set in a CSS rule, it is easy to override it.

  • Unknown's avatar
    suitecg · Member ·

    A different image for each category. Note that I’m not looking to replace the SITE header, but rather the “featured image” page header, as such is seen on the homepage directly underneath the menu. That image is a featured image for that page. While blog POSTS have featured images, blog CATEGORIES do not, so I was hoping that there might be some code that could place an image in place of the text (category name, like in the Announcements page) with a particular image. I’d need to assign a different image for each category that I would use.

  • Unknown's avatar
    thesacredpath · Member ·

    What we can do is to use the category name CSS class set in the opening body HTML tag on the categories pages. The following example is for your announcements page. I just arbitrarily pulled an image from your media library for the example. The first two rules below are general and set a height of 300px (same as on the main page) and turn the grey background white to match the content area. The second rule makes the category title (announcements in this case) transparent. The third is the specific rule that adds the image below the navigation. 

    .category .archive-header {
    height: 300px;
    background-color: #fff;
}
.category .archive-header .archive-title {
    color: rgba(0, 0, 0, 0);
}
.category-announcements .archive-header {
    background-image: url("https://suitecg.files.wordpress.com/2014/05/multisport-scoreboard-header.png");
}

    On the category CSS classes, as you see in the example, there is a dash and then the category name. On categories with two words, there would be a dash in between each work, like this
    .category-first-second

    I’ve set things to have the same 1000px wide by 300px tall image size. The height can of course be changed, if you wish to use an image that is not as tall.

  • Unknown's avatar
    suitecg · Member ·

    Perfect. Thanks again. I think I’ve got enough to be dangerous now. :)

    You’ve been extremely helpful in both providing examples as well as explaining them so I can modify and learn how to do it on my own!

  • Unknown's avatar
    thesacredpath · Member ·

    Awesome, and you are welcome, and glad you are learning to make your own changes from what I am able to share. As always, if you have additional questions or run into something that you need help on, you know where we are. :)

  • The topic ‘McKinley Header Image Insanely Cropped on Mobile’ is closed to new replies.