How to layout such blocks adaptively? and what can be improved in the code?

Question

HTML

Hello, there is such a block, did I make it correctly and what can be improved? did you use BEM correctly?



What to do with adaptive? Now the block has a width of 1100px and the elements are located in percentages relative to this number, what is the best way to layout for other sizes? define several sizes (for example, 900px, 600px) and change percentage sizes under them, or is there some other way? and for mobile phones completely change the composition?

Answer 1

Hello)
In general, BEM is a collection: the organization of the code structure, both html and css. Also the organization of folder-files)
The point is that you can take a piece of your code and use it in other files
Look, if you need this block on another page , then you definitely need to put it in the parent block:
<div class="ingredients__number">05</div>

<div class="ingredients">
<div class="ingredients__number">05</div>
</div>

And styles will need to be written accordingly

.ingredients {
position: relative
}
.ingredients ingredients__number {
position: fixed
}

And if you observe everything else (stylization and folders and files and their names, structure), then yes - your BEM is correct))

What to do with adaptive?

Look at the bootstrap grid, namely at what points they make media requests, and also use these points and yes, change percentage sizes or flexes under them or something else, this is already creative work, depending on which is simpler, depending on which layout, idea) ))
In general, good luck)