0

I have a flex container with 3 divs, that have minimal width (for example, 253px in my case). I want to achieve this behaviour (in email!):

  1. if browser window width is equal or more than (253*3) pixels (plus some more pixels, because browser also adds some margin on right and left, for example, Mozilla Firefox adds 8+8 px), than show these 3 divs in one row
  2. if browser window width is less than (253*3) pixels (plus some more), than place these divs one-under-another. So 3 divs - 3 rows.

Now I have this part of code, with "flex-wrap: wrap" property:

<div style="display:flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;">
  <div style="width:33%;min-width:253px;">TEST DIV NUMBER ONE</div>
  <div style="width:33%;min-width:253px;">TEST DIV NUMBER TWO</div>
  <div style="width:33%;min-width:253px;">TEST DIV NUMBER THREE</div>
</div>

But it is not exactly that i need, because it can be a situation, when we have 2 rows (2 divs in first row, one in second row). I need or 1 row, or 3 rows.

I try to make this with flex method, because for some reason i cannot use @media rule approach.

So what i can add/fix in my code?

UPD: I cannot use < style >< /style > in email template (i create a email template), cause the mail filter will cut all these tags

Nathan
  • 4,358
  • 2
  • 10
  • 26
Krechet USA
  • 15
  • 1
  • 3
  • As this is HTML email, the answer this has been associated with is incorrect. The answer needs to incorporate the 'fab four' technique - https://medium.com/free-code-camp/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848 - and I've got a working example if this is reopened, specific to email – Nathan Feb 08 '23 at 00:39

0 Answers0