Twenty Fourteen Theme Help

  • Hi all!

    I’ve received a lot of support in this forum in the past and am hoping that it will happen again.

    So, I am helping a friend with a site (clayschafer.com) and the slider on his site has an image that does not extend to the entirety of the space that is allotted for the slider and as a result, there is a black and gray striped area where the rest of the picture should be. I read on a forum about inserting this code somewhere:

    @media screen and (min-width: 673px) {
    .slider .featured-content .hentry, .featured-content {
    height: 400px;
    }
    }

    So we tried in the css file, all the way at the bottom (yeah we’re new at this stuff) and it didn’t work…

    If anyone can let us know if this is even the correct code in the first place and where exactly to put it, it would be really great.

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • .featured-content .post-thumbnail img
{ width: 100%; height: auto; }

    editing the theme’s files directly is not a good idea, the changes will get overwritten with the next update of your theme;
    try to add this CSS via a ‘custom CSS’ plugin. https://www.ads-software.com/plugins/search.php?q=custom+css

    Thread Starter sophiamai

    (@sophiamai)

    Oh okay, gotcha.

    Which one do you use? The top two that come up are the Custom CSS one or the Simple Custom CSS and JS.

    I use the custom CSS section of the ‘jetpack’ plugin which I have installed anyway for various reasons, so I am not using any of the CSS plugins of the list.

    just go by the plugin reviews or what you feel is best for your site.

    Thread Starter sophiamai

    (@sophiamai)

    OH, yes we have Jetpack installed as well so we’ll just use that ??

    Okay so what are the next steps, when we click on the CSS section of Jetpack, the one CSS Stylesheet Editor comes up. Do we just include that code that I put above (in the question) directly on that page?

    yes, just include the suggested code into the CSS Stylesheet Editor

    Thread Starter sophiamai

    (@sophiamai)

    We put it in and adjusted the height so the featured image fills out all the way to the bottom of the allotted area, but however much we adjust the width number, it does not fill out to the entire space to the other side.

    Any tips?

    Thanks for all the help so far!

    the space seems to be 1260px;
    try working with images of that width.

    or add the ‘width: 100%;’ to the custom CSS as suggested.
    this will stretch images which are to small but might result in blurry images.

    Thread Starter sophiamai

    (@sophiamai)

    I didn’t see your code:

    .featured-content .post-thumbnail img
    { width: 100%; height: auto; }

    But it worked! Thanks!

    Any idea how to make the white space between the end of the menu bar to the start of the featured photo disappear?

    Thread Starter sophiamai

    (@sophiamai)

    Never mind, I figured it out!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Twenty Fourteen Theme Help’ is closed to new replies.