Hi can I ask some help please, I can’t vertically align my brad_cram to my button “Save and Exit” , if I put margin to brad_cram I get problem in resizing. also my button “save and exit” will overlap if I resize my browser. I add this class d-none d-sm-none d-md-none so that I can hide the div on medium device like tablet, but I want to position my brad_cram under the text Hello World on medium device and to smaller device if possible.
To make ‘Hello World’ lower you can adjust the 6px of the ‘h1’ margin (but you may like to specify all four margin values). Alternatively if you wish to centre the text add align-self: center;. The 6px can then be set to 0.
You can do the same thing for “Let’s be friends” with the ‘p’ selector: changing 15px or adding align-self:center; .
It’s nesting of flexboxes but note especiallly for the ‘right’ box flex-direction:row-reverse; . This gets “Let’s be friends” to go under the button on smaller screens. Note the HTML order is reversed. First time I’ve tried that
For the ‘salmon’ box (background colour coral) the justify-content: space-between; gives the wide spacing on wide screens. You may like use a value of max-width for the body.