Looking for help with a table layout - trying to get buttons displayed side by side instead of stacked. Happy with either CSS or HTML solutions, just not JavaScript. Apologies if my question isn't clear, I'm still learning!
I've attempted:
display: flex;
align-items: center;
justify-content: center;
But it's not quite working as expected.
Below is the CSS and HTML code snippet for your reference. Thank you to anyone who can offer assistance! I've kept the placeholders instead of actual images as this is for my photography website.
An example of what I've tried so far:
@charset "UTF-8";
button{
display:inline-block;
padding:0.5em 3em;
border:0.16em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#FFFFFF;
text-align:center;
transition: all 0.15s;
}
button:hover{
color:#DDDDDD;
border-color:#DDDDDD;
}
button:active{
color:#BBBBBB;
border-color:#BBBBBB;
}
@media all and (max-width:30em){
button{
display:block;
margin:0.4em auto;
}
}