Bricks Breakpoints for landscape

How To
1

Hey :slight_smile:

I wonder if thereĀ“s a way to explicitely tell Bricks that a certain breakpoint is only for landscape.
What I mean with that is that I sometimes need a specific breakpoint with the

@media (orientation: lanscape)

applied.

The design department in our company is always rlly picky when it comes to layouts for different devices and I just ran into the problem that I cannot properly recreate the designs for devices in landscape mode. IĀ“m usually given 4 different designs (Desktop, Tablet landscape, Tablet portrait and Mobile) but I cannot properly create the website for Tablet landscape cause with the current breakpoint system it seems like I can only change the layouts based on the device width and not the height / the aspect ratio or how you wanna call it.
If you hold a tablet horizontally (depending on the tablet) youĀ“ve sometimes reached the desktop or laptop size and (at least as far as I know) thereĀ“s no way to differentiate between big tablet and Laptop.

If you have for example a separate design for tablet landscape thatĀ“s supposed to have 100% viewport-height the designs are pretty difficult to create. In my last project our design department wanted to have a layout specifically for tablet landscape where we had a full height image on the left side and text and a form on the right side.

When I add a new breakpoint in Bricks I can see that there are icons for tablet landscape and phone landscape but IĀ“m not sure if thatĀ“s just the width or if these breakpoints actually take into account the ā€œorientation: landscapeā€-CSS style that I mentioned above. So far I couldnĀ“t find any CSS property like that which is why I assume itĀ“s really just the width. If thereĀ“s no other way to explicitely tell Bricks that I want a separate design for landscape format then it might be a feature request in this case :stuck_out_tongue:

2 Likes
2

I agree. I am new to Bricks, but it seems like we could use a more flexible breakpoint system.

The viewport widths of modern phones in landscape mode are often larger than those of tablets in portrait mode, but the aspect ratio and screen orientation are completely different, so the designs will not fit well on both.
The orientation and aspect ratio of tablets in landscape mode are more similar to those of laptops and desktops, but tablet screens do tend to be relatively higher.

In most cases, the main differences will be section heights and image heights, which could be overridden via custom media queries in CSS. However, if you would want the structure or elements on tablet landscape to be different from those on desktop, this would be harder to achieve (create multiple sections and change display via media queries, I guess, although this is a bit messy).

Being able to set an orientation, or a min/max height for each breakpoint, could solve this. However, Elementor has a similar, width-only custom breakpoint setup as Bricks has, so there is probably a reason for it.

1 Like