Show Media Behind Cropping

  • Author
    Posts
  • #158943

    stevensankey88
    Member
    Original poster

    Hi there,

    I am very new to WordPress and I love the minimalistic Dicot theme. However, I can’t seem to get around an issue with with the “Show Media Behind” option for a “blog posts” block which I’m using for “specific posts” (2 columns with 4 specific posts). In the WordPress editor the featured images resize to fit behind the blog titles perfectly but when you preview the page the featured images are scaled / cropped to a specific width. I’ve even resized the images to around the correct dimensions for the “Show Media Behind” option (1200 x 350px) but the same issue occurred. This persists throughout desktop/table/mobile. The same issue occurs with “Show media on top” option.

    For the moment I have it set to “show media on the left” which is fine, but on mobile these featured images show extremely small (maybe thumbnail size?) whereas the other blocks all show their featured images full width on the page.

    Any help would be super appreciated as nothing I’ve tried has worked so far.

    Thanks!

    The blog I need help with is: sankeyreports.com

    #158984

    designorbital
    Theme Author

    Hi,

    If possible, please share screenshots of WordPress editor and Frontend result.
    It will help us to understand the things.

    Thanks

    #158988

    stevensankey88
    Member
    Original poster

    Hi there,

    Apologies, here are the pictures of both versions:

    Show Media Behind:
    Edit window
    Frontend result

    Media on the Left:
    Edit window
    Frontend mobile result (composite)

    I have extended the image for the above frontend mobile result to show to difference between the “Featured” section images (which are tiny) and the other sections such as “Most Recent”.

    Many thanks.

    #159051

    designorbital
    Theme Author

    Hi,
    Thanks for sharing screenshots.

    I am currently looking at home page. It seems Media left is working as expected. Please see the screenshot.

    https://d.pr/free/i/NhT1Qd

    Further,

    Please give me frontend URL of both Media Behind and Media Left. I will see the code.

    Thanks

    #159086

    stevensankey88
    Member
    Original poster

    Hi there,

    Yes the Media Left works on desktop, I was just wondering if there is a way to increase the size of the featured images on Mobile since they are considerably smaller than the featured images in other blocks, even though on desktop they are much larger. However, if the Media Behind issue is resolved then I will be using that option anyway.

    I have changed the home page to Media Behind for the “Featured” section as per your request. I have added a block just below titled “Featured (Testing) which is the Media Left version you’ve seen.

    I hope this helps.

    Apologies if this is frustrating, I am very new to this.
    Thanks for your patience.

    #159127

    designorbital
    Theme Author

    Hi,
    Please try the following css snippet.

    
    .home .wpnbha.image-alignbehind .post-has-image .post-thumbnail {
        width: 100%;
    }
    

    Thanks

    #159128

    stevensankey88
    Member
    Original poster

    PERFECT! Thank you so much. It’s fixed the issue and it looks perfect on mobile as well. That’s been bugging me for ages.

    Thank you so much for your patience and your expertise.

The topic ‘Show Media Behind Cropping’ is closed to new replies.