Need help for the alignment and positioning

[jemz]

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.

here is my pen

Thank you in advance

[Erik_J]

@jemz

here is my pen

Before looking at the issue.

To use the Codepen effectivly, don’t paste the whole web page in the HTML compartment. Use the Codepen compartments for all relevant code:

Put only the HTML that is between the body tags into the HTML window.

Put the CSS between the head’s style tags into the CSS window.

Put the Javascript into the Javascript wimdow.

Then take the external sources and put their links in the settings so they are loaded with the pen.

The CodePen docs:
https://blog.codepen.io/documentation/pen-editor/

[Archibald]

Does this start to do what you want?

See what happens when you change browser width

[jemz]

Hi Archibald Thank you yeah this is what I want. is it possible to make the Hello world and Let’s be friends little lower ?

[Archibald]

Hi jemz,

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

[jemz]

Thank you

[Archibald]

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.