Portfolio Tiles Cropped On Smaller Screens

  • Resolved lanxalot

    (@lanxalot)


    7 years, 2 months ago

    Hello

    I have setup a Portfolio section on my site after installing the Bento Expansion Pack.

    I am displaying projects on a Masonry page and have altered the bento_tile_size on two portrait shape tiles to 1×2.

    This works well on a larger desktop screen, I get square tiles for the 1×1 images (obviously) and portrait for the 1×2 images.

    When the Portfolio section is viewed on a smaller screen, all tiles default to a slightly narrow cropped landscape image.

    Is there any way I can get the full uncropped image to display in each masonry tile for all screen sizes? That would be ideal.

    If not is there any way I can alter individual tile aspect ratio using the bento_tile_size setting (column/row settings) for smaller mobile screens? As mentioned, it works well on larger screens but is ignored on smaller screens.

    Many thanks in advance for having a look.

    Kind regards

    Lanx

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author satoristudio

    (@satoristudio)

    Hey Lanx,

    thank you for choosing Bento!

    At the moment there is no setting in Bento to alter the size of the tiles on small screens exclusively, the masonry tile image is mainly envisaged as a background, i.e. it’s not very suitable for displaying pictures that have crucial elements or need to preserve their layout. If the tiles were to preserve their aspect ratios on small screens, a lot of them would become unusable due to uncomfortable proportions or small size, as revealed by our testing.

    You can try adding custom @media queries (“Additional CSS” tab of the “Appearance – Customize” admin section) for all tiles or specific tiles to force them to behave differently on mobile screens, e.g.

    @media screen and (min-width: 10em) {
.masonry-item-before {
    padding-top: 100%;
}
}

    will turn the tiles into squares. Altering the padding-top parameter percentage will change the height of the tiles relative to their width.

    Sincerely,
    Andrii / Satori Studio

    Thread Starter lanxalot

    (@lanxalot)

    Many thanks for the reply Andril.

    I can see why you have designed it this way.

    I actually included the Unite Gallery Lite plugin to organise my Masonry tiles without cropping them on smaller screens which seems to work OK.

    I do also like the look of the Bento grid though.

    Many thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Portfolio Tiles Cropped On Smaller Screens’ is closed to new replies.