Image breakpoints in image grid/list

Hi all,

I have a 10x2 grid of logos on the homepage of

Great. Except… when we get to smaller screens, it shrinks then boom… turns into one long column of 1x20 logos. Not good.

Does anyone have any magic I can apply to create breakpoints (or something…) so it doesn’t do that, and so everything breakpoints in a nice way?

I have a feeling that Bootstrap Grid can do it, but I’m really not sure what to enter… Does anyone have any experience of this and provide some pointers/guidance?

Thanks :slight_smile:

Hi Cath,

The website looks really great!

It might help if you try to create a table within the text component on a landing page, and add a logo per table cell.

The logo section should then be responsive on all kinds of devices.

Really hope this helps!

With best regards,

Hi Anastasiia,

Thanks for the suggestion!

Unfortunately I’m strongly trying to avoid hard-coding images in place - the objective is really to lean on the content management system (Views in this case) so future website maintainers don’t have to manually duplicate content across the site, or be familiar with the finer points of online image management and display.

Past experience has shown that image quality tends to start degrading when going down the ‘manual’ route - manual coding an image feature might be fine ‘today’ when the site is handed over freshly-built, but given the workload, web expertise and upcoming changes in openlab, I really want to future-proof the site to ensure structural and display consistency, ease of maintenance, and miminise the potential for deterioration.

I know there are ways to automate the breakpoints in a grid or flexbox according to device screensize and irrespective of device or browser - with Bootstrap Grid for example, it’s just a matter of setting the boundaries. I specifically want to target x-small screens - but there is a high risk of ‘unknown unknowns’ for me on this one :wink:

@pkatyaya has offered meeting to discuss this directly with the Web team, so I’ll do that and will post the solution here so it’s available for everyone wanting to leverage the power of Views!

Thanks :smiling_face:

Hey @alazuka @pkatyaya and everyone who might be reading this fascinating saga of my layout problems…

The solution is: Flexbox! We move away from setting a grid (or a HTML table, which can be affected by a theme’s CSS table styling), and instead just let Flexbox create the rows/columns and breakpoints automatically.

Two ways to use it on a Drupal website:

  • Views Flexbox module: Views Flexbox |
  • Hard-coded using inline CSS and DIV classes into either a Block (Drupal core, won’t ever break) or as a Text Component (if using Landing page/CERN Theme) . This is going to be the backup method just in case the module breaks coming into Drupal 10. See W3C’s CSS Flexbox (Flexible Box)

The aim was to use Views so I could re-use image content, auto-styling and links so that the website maintainer doesn’t need to do anything special. The content-type is then used in various displays across the site, according to context. As Views intended :slight_smile:

Views Flexbox module is easy to set-up, very intuitive. Simply select “Flexbox” as the Format in Views (eg. where you’d select table, unformatted list… etc). Select how you want Flexbox to behave (justified, row-based or column-based etc etc), and boom, all done.

The hard-coded version can go into a block (or a text component) using CERN Full HTML format like this:

<!DOCTYPE html>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

.flex-container > div {
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 75px;
<div class="flex-container">
  <div><img src="/sites/default/files/styles/thumbnail/public/X.png?itok=9b8heJo9" alt="BOX 1"></div>  /** here I inserted the image link to the Views auto-formatted image, so no need to upload a separately formatted image **/
  <div>[link to auto-formatted image]Box 2</div>
  <div>Box 3</div>
 ..... etc

Both options side-by-side comparison currently available to view on the homepage of the openlab dev site at for the next couple of weeks (over Sept 2022, although may disappear in time).

Grids and Tables are dead. Long live Flexbox! :star_struck:


Thank you so much, Cath! This is super useful :slight_smile: Really glad you have found the solution (and such a great one!) Noting down straight away!

Have a very nice afternoon!

With best regards,

Hi Cath

Wonderful, thanks for sharing!