featured image resize, and tiny hyphens

  • zacdillon · Member ·

    Hello!

    First of all, I have to say I love this theme. I upgraded my account just so I could use it. It’s perfect for what I’m doing.

    I have two questions…

    1.
    My featured images (for now) are pulled from Pexels, and they’re big. Especially the landscape one (snail shell) is too big on the post page itself. I’m wondering if there’s a max pixel size I could put in the CSS to get all of my featured images to adapt and fit within a limit.

    Ideally, I’d have two different bits of code, one limiting the max height for portrait images, and another limiting the max width for landscape. Is this possible?

    I realize I could resize the images manually, but I plan to get images from varied sources, and I’d love to simplify/automate my posting process as much as I can.

    2.
    There are strange little hyphens on my social media buttons below the posts.

    On the theme’s sample pages, those hyphens are aligned next to the buttons, but on mine they’ve gone screwy. I’d actually love a way to get rid of them altogether. But if that’s not possible, it’d be nice to clean them up.

    (Here’s an example on the demo where they’re aligned: https://demos.pixelgrade.com/gema/lifestyle/fridas-craftsy-coffee-shop-2/)

    Thanks in advance for your help. Again, I’m so happy with this theme, you’ve done fantastic work with this one.

    -Zac

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

  • alinclamba · Staff ·

    Hey, Zac!

    Thanks for the kind words. It’s awesome to hear you enjoy our Gema theme. Thank you.

    Now, let’s take care of the questions one by one.

    #1.
    You can limit the size of the featured images using a custom CSS:

    /* Limit Featured Image Size on Single */
@media only screen and (min-width: 900px) {
   .singular .entry-image--landscape .entry-featured {
       max-width: 900px;
   }
}

    #2.
    The CSS below will do the trick:

    /* Remvoe Hyphens on Social Links Buttons */
.entry-content ul:not([class*=wp-block]):not(.blocks-gallery-grid)>li:before {
   display: none;
}

    Let me know if the CSS provided help and if you achieve what you are looking for by using it.

    Stay safe!
    Alin

  • zacdillon · Member ·

    Alin, those fixes worked perfectly. Thank you so much for your help!

    You stay safe, too!

    -Zac

  • alinclamba · Staff ·

    Hey, Zac!

    I am glad I could help.

    Take care!

    Alin
    Pixelgrade

  • The topic ‘featured image resize, and tiny hyphens’ is closed to new replies.