Changing Featured Image Size/Menu Issues

  • Resolved wansfell62

    (@wansfell62)


    6 years ago

    Thank you for an incredible Theme.

    I love it and think it looks so clean and minimal. However, I need some help.

    I know the scaling of images is 2:1 on the front screen, however is there anyway I can make them look more like the images in the actual posts (I am starting a music blog), as they look odd the way they are and the bottom image in particular cuts off the band text. Even if I can just show the top of the image that would be an okay compromise.

    Also, I am using some Additional CSSalready and made the background and mobile menu Black. However on mobile it looks a little grainy.

    Thanking you in anticipation

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Ben Sibley

    (@bensibley)

    6 years ago

    Thanks for the kind words 🙂

    I have a couple of solutions you can try out.

    This CSS will position the images so that the top of them is always displayed: 

    @media all and (min-width: 900px) {

  .excerpt .featured-image {
    background-position-y: 0;
  }
}

    And this CSS will keep the images contained entirely in the space available:

    @media all and (min-width: 900px) {

  .excerpt .featured-image {
    background-size: contain;
    background-repeat: no-repeat;
  }
}

    Let me know what you think.

    • This reply was modified 6 years ago by Ben Sibley.
    Thread Starter wansfell62

    (@wansfell62)

    6 years ago

    The first CSS code has positioned it perfectly and I am so thankful for your quick response.

    Can I also ask if you know a way that I can make the Main Menu on Desktop show on one line or alternatively hide the Main Menu and just show the Secondary Menu on my site?

    If at all possible (I’ll open a new thread if this isn’t appropriate)

    Theme Author Ben Sibley

    (@bensibley)

    6 years ago

    Happy to help 🙂

    It looks like you’ve found a solution already that centers the menu and provides it with more space, but if you want to try out hiding it, you can use this code:

    .menu-primary {
  display: none;
}
    Thread Starter wansfell62

    (@wansfell62)

    6 years ago

    Just once last query; I have used this and think it looks great

    This CSS will position the images so that the top of them is always displayed:

    @media all and (min-width: 900px) {

    .excerpt .featured-image {
    background-position-y: 0;
    }
    }

    However, it doesn’t transpose to the mobile version. Is there any code to get the top of the image on the blog posts to show in mobile as well.

    Again, thanks for all your help. You are an absolute star 🙂

    Theme Author Ben Sibley

    (@bensibley)

    6 years ago

    Yes, let’s take that code out of the media query and then it will work well for mobile too:

    .excerpt .featured-image {
  background-position-y: 0;
}

    You can replace the prior snippet with this one.

    Thread Starter wansfell62

    (@wansfell62)

    6 years ago

    Again, thank you so much Ben

    That looks exactly how I want it 🙂

    Theme Author Ben Sibley

    (@bensibley)

    6 years ago

    You’re welcome! Stay in touch if you need anything else and I’ll be happy to help.

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

The topic ‘Changing Featured Image Size/Menu Issues’ is closed to new replies.