Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 8, 2019 at 12:58 am #1088074
    quercusash

    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.

    April 9, 2019 at 2:22 am #1088481
    Nikko

    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

    April 9, 2019 at 3:56 am #1088511
    quercusash

    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?

    April 9, 2019 at 8:07 am #1088573
    Nikko

    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

    April 10, 2019 at 5:35 am #1088966
    quercusash

    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.

    April 10, 2019 at 9:32 am #1089035
    Nikko

    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

    April 11, 2019 at 12:46 am #1089283
    quercusash

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

    April 11, 2019 at 5:05 am #1089377
    Nikko

    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

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