Hey @Daniel_Mad, no worries man.
I do! Im from Bolivia but I live in USA. Si tienes mas preguntas mandame un mensaje y voy a tratar de contestarte lo mas pronto que pueda. Mucha suerte en tu projecto.
1 Like
Great, Pablo. Highly appreciated!
So… to go back to the box model… which elements should I use? DIV boxes nested inside other DIV boxes? Or is there another, better approach?
And something else… the screenshot from my project you posted before (with the 50vh top and 5 vw left margins)… How would you do the same with flex? I mean, how do you control those exact margins?
Thanks again,
Daniel
So for the box model, look at it this way, you have headings that are “sitting” on a section, in order to array them however you want it is always better to put them inside a container, it could be a div block or a container, but once the headings are inside a “box” you can then move that box with more flexibility. Flex it is a good start for boxes inside a container, it allows you place boxes in the middle, aligned on top, bottom, left or right.
on the picture above you had a heading with a margin of 40vh, instead why don’t you place your headings inside a div block and give that div block a margin or a flex position of aligned to the bottom?
You will have to do a lot of trial and error to see what really works best for your design. I suggest you to look at the webflow university tutorials on layout, they will help you a lot with the best practices for responsive design.
1 Like
Wonderful, Pablo. Thanks a lot for your lengthy explanation. Highly appreciated. I will do as you suggest.
Daniel
1 Like
Hi Pablo,
I gave this example a look and, as you see, I’m using a DIV for the headings. And if I use flex for the DIV everything falls in the wrong places.
Inside this DIV there are three different headings and the arrow. Each of these elements is affected by a different interaction.
So I don’t really see how could your approach help. Or why should I use it. I suspect it is all about “good practices”, but I don’t really get it.
Should I nest DIVS within DIVs? One heading per DIV? Anything else?
Daniel
Hello @Daniel_Mad ,
There are so many variants, what display you are using, positioning of the element with relation of its parent element, position of the element, padding, margins, etc. If the way you build it works for your design then do it that way. I was just saying that to avoid issues with responsiveness and to save time, the box model works pretty well. It is hard for me to give you an advice if I don’t really know what your design looks like, like do you really want that space from your navbar to your first heading? Do you want to align the “Heading” with the down arrow? You should place multiple elements inside containers as it suits your design. Good luck.
1 Like
We also ran into this question with a client project and created a script to show or hide any desired element based on the device, OS or browser being used by the site visitor.
Here is a link to the tutorial video that goes through the problem as well as walking you through the solution.
If there are any questions please feel free to tag me!
Happy Friday!