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?
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
@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!
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.
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
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>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-container > div {
width: 100px;
margin: 5px;
text-align: center;
line-height: 75px;
}
</style>
</head>
<body>
<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
</div>
Both options side-by-side comparison currently available to view on the homepage of the openlab dev site at https://openlab-cn-may.web.cern.ch/ for the next couple of weeks (over Sept 2022, although may disappear in time).
Grids and Tables are dead. Long live Flexbox!
-cath
