Support » Theme: GeneratePress » Making Images Responsive – Not Stacked?

  • Resolved rob33

    (@rob33)


    Hi,
    Not sure if possible but unable to set up responsive mode with images in GP.
    As a result I use envira plugin which I like for desktop but for images in mobile it stacks – there is no mobile responsive control in free version.
    Elemntor builder works in responsive by reducing width 50% but in desktop doesn’t perform too well. I can disable the section in desktop but can’t (vice versa) disable mobile in envira.
    Wondered if there’s any way that stops stacking and allows images to sit say 1×2 in mobile – 1 row 2 columns.
    Thanks as always 🙂

    Note: Using V2.2 – previous GP premium buyer but 1yr passed, ie no forum access, will update next mth.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi there,

    GP’s responsive controls only apply to Theme elements – not the post content.
    I can’t really provide support on how to ‘fix’ envira or elementors responsive display – something you would need to speak with their support about.

    I could assist with some CSS if you were just using the core Gallery Block and you can provide a link to the site.

    rob33

    (@rob33)

    Hi David,
    No was just referring to how I’d like images to appear in responsive essentially.

    Some css would be magic, I have removed envira shortcode and set normal wp image gallery to 6 columns – 6 images. I ideally liked the way enviro arranged them in desktop mode, pls see ss with tick next to it – just 1px between each image i think – so side query is if this is also possible in current wp gallery?

    For responsive look – now they appear as rigid line of six instead of stacking one on top of the other. But as queried ideally prefer 1 x 2 – 1 row x 2 x columns (images).

    Actual image size of all 6 images are 290 x 305. FYI when stacked this stretches them.

    site: teojobs.com

    http://teojobs.com/wp-content/uploads/2020/01/images-top-of-home.jpg

    thanks David.

    • This reply was modified 8 months ago by rob33.
    David

    (@diggeddy)

    Try this CSS:

    .site-main .gallery {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1px;
        margin-right: -1px;
    }
    .site-main .gallery .gallery-item {
        max-width: 100%;
        flex: 1 0 16%;
    }
    
    .site-main .gallery .gallery-icon {
        padding: 1px;
    }
    
    @media (max-width: 768px) {
        .site-main .gallery .gallery-item {
            flex: 1 0 50%;
        }
    }
    rob33

    (@rob33)

    Oh that works beautifully, but in tablet mode it stretches images out as it acts as it should for mobile responsive I’m guessing. Would it be possible to get additional css for tablet?
    If that’s doable, thanks David.

    • This reply was modified 8 months ago by rob33.
    David

    (@diggeddy)

    Try this:

    .site-main .gallery {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1px;
        margin-right: -1px;
    }
    
    /* Desktop */
    .site-main .gallery .gallery-item {
        max-width: 100%;
        flex: 1 0 16%;
    }
    
    .site-main .gallery .gallery-icon {
        padding: 1px;
    }
    
    /* Tablet Devices */
    @media (max-width: 1024px) and (min-width: 600px) {
        .site-main .gallery .gallery-item {
            flex: 1 0 33%;
        }
    }
    
    /* Mobile Devices */
    @media (max-width: 599px) {
        .site-main .gallery .gallery-item {
            flex: 1 0 50%;
        }
    }

    Separate settings for tablet – you can reduce the max-width accordingly.

    rob33

    (@rob33)

    Thanks – almost, but now the desktop images are performing like in tablet – being stretched to 3 a row.

    David

    (@diggeddy)

    Adjust this max-width: 1024px reduce it down to 768px if needed

    rob33

    (@rob33)

    Sorry, that’s in Customize mode in GPress that they appear like that in desktop, in normal website view they’re ok 🙂
    With the tablet – in order to arrange all 6 images across the top presumably I change % to 16.6 and they now appear in row in both desktop and tablet when in customize GP and looks ok in desktop outside of customizer – just checking this is correct way to go?

    Thanks.

    David

    (@diggeddy)

    If its working then yeah thats correct 🙂

    rob33

    (@rob33)

    Much obliged.

    David

    (@diggeddy)

    You’re welcome

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Making Images Responsive – Not Stacked?’ is closed to new replies.