Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 3, 2025 at 8:38 am #1492047
    condonp

    Dera Sirs,
    I have an issue with this page https://peter-test1.co.uk/gallery/ on ipad both landscape and portrait the thumbnails seem to have different heights . It is possible to have these heights consistent so all are the same height. See screen shot

    Many thanks. Pete

    https://iili.io/fzhGzDQ.jpg

    December 3, 2025 at 10:41 am #1492051
    Guenni007

    Do you really want it to be that narrow on small screens?
    I would set the content differently to narrow. Therefore, remove:

    #section-width {
  max-width: 50%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

    and set instead:

    #section-width .container {
  max-width: 750px;
}

    And here’s the next layout tip.
    I would place different design elements in different color sections.
    So all gallery images in one section (#section-width) – including the single one that comes last – without empty columns – then the films below in a separate section.

    If you have done that – i will give you a flex-box code to style your gallery.

    December 3, 2025 at 10:42 am #1492052
    Rikard

    Hey condonp,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1750px) {
#section-width .flex_column {
  height: 300px;
  min-height: 300px;
}
}

    You might have to add more media queries with different height values. Simply copy the code above and change the max-width value.

    Best regards,
    Rikard

    December 3, 2025 at 11:19 am #1492054
    condonp

    .

    • This reply was modified 1 hour, 26 minutes ago by condonp.
    December 3, 2025 at 11:22 am #1492056
    Guenni007

    the better way would be over flexbox layout then …

    you got before more than 12 columns inside that section with your images – that should be inside a section –
    then the next color-section contains your heading – a separator (f.e. in one 1/1 column) and your videos – maybe inside 1/3 columns
    see what happens if you place this to your quick css:

    #av_section_1 .container {
  max-width: 800px;
  margin: 0 auto !important;
}

#av_section_1 .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 20px
}

#av_section_1 .entry-content-wrapper:before,
#av_section_1 .entry-content-wrapper:after {
  display: none;
}

#av_section_1 .entry-content-wrapper .flex_column {
  flex: 0 1 30%;
  width: unset !important;
  margin: 0;
  padding-bottom: 20px;
}

@media only screen and (max-width: 599px) {
  #av_section_1 .entry-content-wrapper .flex_column {
    flex: 0 1 45%;
  }
}

@media only screen and (max-width: 359px) {
  #av_section_1 .entry-content-wrapper .flex_column {
    flex: 1 1 100%;
  }
}

    you can now pull all your columns from your color-section: #section-width with your images to that first color section.

    December 3, 2025 at 12:42 pm #1492061
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.