This can be fixed in different ways, depending on how much text there is on a button and how wide container that holds the buttons is.
Change the button margins
By default, the first button has a right margin to create a gap between the first and second button. That margin remains if the two buttons stack on top of each other on smaller screens. Fix this by adding the same left and right margin to both buttons. This css keeps the default top margin. Add it to the free form custom css of the module.
selector .et_pb_button{
margin-left: 10px !important;
margin-right: 10px !important;
}Code language: CSS (css)
Increase the container width
The default container width is 80% causing buttons to stack on top of each other. Increase the width to keep them next to each other.
/* -- START Fix full width header center issue on mobile -- */
@media (max-width: 479px) {
selector .et_pb_fullwidth_header_container {
width: 100% !important;
}
selector .et_pb_fullwidth_header_container .header-content {
width: 100% !important;
}
}
/* -- END Fix full width header center issue on mobile -- */Code language: CSS (css)