Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1088074

    I’ve added team members to a 1/3 grid row but even though all the photos are saved to the same size the image in the 3rd column (of both rows) is displaying larger and making things uneven. I can’t work out why it’s doing this. Is there a way to have all three images line up across the top and bottom?
    Issue can be viewed here: http://www.quercusgardens.com.au/Rhapsody/about-us/
    Thanks.

    #1088481

    Hey quercusash,

    Try to upload the same image size in order to fix this or atleast the same aspect ratio (width and height ratio) since they are on separate elements.
    Hope this helps.

    Best regards,
    Nikko

    #1088511

    All the images already the exact same size 600x495px which is why I can’t work out why there is a problem. What else could be affecting it?

    #1088573

    Hi quercusash,

    The first column’s first image is 422 x 349px (link in private content).
    The 2nd column’s images are equal however the first 2 boxes has 5px right padding, remove the padding or just make the left and right padding equal for the 3 columns.

    Best regards,
    Nikko

    #1088966

    I’ve done the padding that way because we are attempting to make it look the same as other elements in the site (eg. New Gardens and Blog sections on the homepage http://www.quercusgardens.com.au/Rhapsody/). We don’t want different spacing throughout the site. I initially tried using columns but that didn’t let us do this either. I’ve made the two end images slightly small than the others now to try to force them to look the same and it works ok for big screens but on small screens now those images go edge to edge and the others don’t. We really them to be uniform across all devices. If there is another way to achieve what we need I’m happy to try that. Thanks.

    #1089035

    Hi quercusash,

    Go to Enfold > Layout Builder > check Show element options for developers.
    Then edit the Grid Row, add a Custom Css Class for example className (you can use any name you’d like).
    Then in Quick CSS, located in Enfold > General Styling, add this css code:

    #top .className {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    #top .className {
        padding: 0 !important;
        flex-basis: 33%;
    }

    Best regards,
    Nikko

    #1089283

    Still no luck. We may have rethink our layout. Thanks anyway

    #1089377

    Hi quercusash,

    Okay, if you want to have a last try, please give us admin access, I’ll create a sample page using what I mentioned above.
    If not, then just ignore this message.

    Thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Images in grid row are not same size’ is closed to new replies.