#PROBLEM IN PLACING BUTTONS

1 messages · Page 1 of 1 (latest)

magic wind
#

I am facing difficulty in placing the email and join now button one after one below another , PLEASE HELP

Screenshot_50.png
lost pier
#

kinda hard to tell without all your code including html but give this a try - in your .button-wrapper add: gap: 5px;

drifting matrix
#

@lost pier I think he meant, How to put both buttons below one another.
@magic wind Pls add flex-direction: column in .button-wrapper. If still not working then replace justify-content with align-items .

#

@magic wind

.button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center
}
magic wind
#

@drifting matrix you got it right , and it s working . Thanks

lost pier
frosty ibex
#

All you would need is to add display : block to the buttons . You don’t even need flex on the wrapper as block level elements stack by default . I know it’s common to just add flex to everything but it’s unnecessary unless you want to take advantage of the flex behaviour like putting block elements in a row, use the gap , take advantage of flex-shrink, flex-grow, flex-basis, flex-wrap behaviour.

Buttons are display: inline; by default so that they can go next to each other. Giving them a display: block; allows them to stack.

There are often many ways to approach the same goal and get the result you’re looking for! While flex on button-wrapper does work, it’s 2-3 extra lines of css that are unnecessary. (It’s like declaring body { color: black; } ; unneeded as it’s default)

.button-wrapper {
/* remove flex and flex-direction */ 
} 

.button-wrapper button {
  display: block;
  
  text-align: center;
  /* default user-agent styles have this on buttons */
}