How to customize the display in breakpoint 1366px?

Design help General
1

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 >>>

40%20PM
40%20PM720Ă—339 4.89 KB

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

15%20PM
15%20PM720Ă—843 8.55 KB

Here is my site Read-Only: [LINK]

2

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
3

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.

4

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
5

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

6

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

7

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!

8

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