â–Ľ
Streaming live at 10am (PST)

How to customize the display in breakpoint 1366px?

Hey there,

Currently, i have this 3 divs and i use grid to make them show in 1 row, it looks fine on normal desktop view(say 1440px), see below image >>>

but i want it to be like this when it comes to 1366px viewport, is it possible to do that? Please see below image >>>


Here is my site Read-Only: [LINK]

Hello @CheeKiang_Chan

For this you’re going to need custom css code, something like this:

<style>
@media (max-width: 1366px) {
  .your-element-class {
    max-width: 50%;
    }
   }
</style>
1 Like

Although looking deeper into your project I saw that you’re using grid for this. I would recommend changing to flexbox for this if you want an easier way to do it.

Hello @aaronocampo,

Do you mean it’s better to use flexbox with this code?

<style>
@media (max-width: 1366px) {
  .your-element-class {
    max-width: 50%;
    }
   }
</style>
1 Like

There wouldn’t be the need for this code if you use flexbox for this.

Yes, it would be better to use flex with this code.

Can you explain a little bit more your approach @Jeandcc? Sounds interesting.

@CheeKiang_Chan needs a way to create another breakpoint for 1366px.

I would love to hear how would you do it without code, this would result in cleaner code which is perfect!

I 'm not 100% sure if that’s what you’re looking for, but if you use the Flex Child Grow And Shrink customizable settings, I believe you can achieve what you need. Using code might be faster, and less “thinking-demanding”. But it would be interesting to achieve that without code