Okay
  Public Ticket #2631611
Post Grid - Force or keep square Image sizes
Closed

Comments

  •  2
    melsaunders started the conversation
    December 14, 2020 at 5:17pm

    Hi - I am using the 'Post Grid' element to display latest portfolio posts on the home page. This looks great on desktop, but on smaller screens the blocks change dimension (between portrait and landscape). Is there any way (or custom CSS) I could add that would keep the images always square and just scale down?

    Thanks!


  •  2,963
    Andrew replied
    December 14, 2020 at 5:44pm

    Hi There,

    Try to regenerate your image thumbnails using this plugin: https://wordpress.org/plugins/regenerate-thumbnails/

    Thanks.

  •  2
    melsaunders replied
    December 14, 2020 at 6:20pm

    Thanks for the quick reply - great support as always. 

    I tried downloading the plugin and regenerating the thumbnails, but it hasn't made any difference, the boxes are still resizing rather than staying square:

    https://wordpress-391871-1342624.cloudwaysapps.com/

  •  8,849
    Tahir replied
    December 15, 2020 at 6:44am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 999px) and (min-width: 690px) {
    body .nectar-post-grid[data-columns][data-grid-spacing="10px"] .nectar-post-grid-item {
        width: calc(50% - 20px);
        padding-bottom: 50% !important;
    }
}
.nectar-post-grid[data-grid-item-height="40vh"] .nectar-post-grid-item {
    min-height: 20vh !important;
}
.nectar-post-grid[data-columns="3"][data-grid-spacing="10px"] .nectar-post-grid-item {
    width: calc(33.32% - 20px);
    padding-bottom: 33.3% !important;
}

    Thanks

    ThemeNectar Support Team 

  •  2
    melsaunders replied
    December 15, 2020 at 9:00am

    That's brilliant and works well! Using a phone it does stay square - although if I just resize the browser if still reverts to thin landscape. See attached. Can anything be done to stop this?

  •  8,849
    Tahir replied
    December 16, 2020 at 9:40am

    Hey Again,

    Use this revised css and remove the one earlier provided.

    .nectar-post-grid[data-grid-item-height="40vh"] .nectar-post-grid-item {
    min-height: 20vh !important;
}
@media only screen and (max-width: 999px) and (min-width: 690px) {
    body .nectar-post-grid[data-columns][data-grid-spacing="10px"] .nectar-post-grid-item {
        width: calc(50% - 20px);
        padding-bottom: 50% !important;
    }
}
@media only screen and (min-width: 690px) {
    .nectar-post-grid[data-columns="3"][data-grid-spacing="10px"] .nectar-post-grid-item {
        width: calc(33.32% - 20px);
        padding-bottom: 33.3% !important;
    }
}
@media only screen and (max-width: 690px) {
    body .nectar-post-grid[data-columns][data-grid-spacing] .nectar-post-grid-item {
        width: 100%;
        padding-bottom: 94%;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    melsaunders replied
    December 16, 2020 at 11:34am

    Thanks for your perseverance on this! It might be a server cache issue, but when I test on desktop (chrome browser resizing) it works perfectly. But when testing on my actual iPhone, I still get the landscape (wrong) sizing? 

    Does it look okay for you on an actual phone?


  •  8,849
    Tahir replied
    December 16, 2020 at 1:52pm

    Hey Again,

    1. Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ .
    2. If you are using WP Rocket use this guide :  https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#critical-path-css .
    3. For Woocommerce caching issues see: https://docs.woocommerce.com/document/configuring-caching-plugins/ . 

    Thanks

    ThemeNectar Support Team 

  •  8,849
    Tahir replied
    December 16, 2020 at 1:53pm

    Also, they seem to show up square on my Android mobile as well as Desktop.

    Thanks

    ThemeNectar Support Team