How Do I Make These Buttons in a Row Instead of a Column and How Do I Scale Everything?-CodePudding

I am kind of new to HTML and CSS so I decided to try and make a new website. I am almost finished but the only issues that I have are that the buttons are in a column instead of a row and whenever I try to view the website in different screen sizes, the text is partially off the screen. I've tried using floats to resolve the button issue but I couldn't seem to understand the actual function and how to use it. I also have 0 clue how to fix the scaling part. Any solution and an explanation about it would be really helpful. Thanks in advance!

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    }
body{
    min-height: 100vh;
    background: #782F40;
    transition: 3s;
}

h1{
    color: white;
    font-family:Arial, Helvetica, sans-serif;
    text-align: center;

    

}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.title{
    
    font-size: 130px;
    color: #FAF9F6;
    font-weight: 700;
    

}

.subtitle{
    color: white;
    font-size: 80px;
    
}

button{
    margin:7px auto;
    display:block;
    background-color: transparent;
    color: #FAF9F6;
    width: 70px;
    height: 70px;
    border: 5px solid white;
    font-size: 25px;
    border-radius: 50px;
    transition: transform .6s;
    overflow: hidden;
    
}



button:hover{
    color:white;
    cursor: pointer;
    transform: scale(1.03);
}


#particles-js{
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="expires" content="timestamp">
    <title>Julian Sanchez</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"></script>
    

</head>
<body>


    <div >
        <div >
            <h1>
                <span >Julian Sanchez</span><br>
                <span >CS @ FSU</span>
            </h1>
        </div>
        <div >
                <form>   
                <button type="submit" formaction="https://www.google.com/">
                        <i ></i></button></form>    
                        <form>   
                <button type="submit" formaction="https://www.google.com/>
                        <i ></i></button></form>  
        </div>
    </div>


</body>
</html>

CodePudding user response：

I am also new to HTML but I think you can try changing the button’s display attribute from block to inline

CodePudding user response：

Learn flexbox it will make your life much easier.Moreover you dont need form tag for buttons.

 <div  style="display: flex; flex-direction:column" > 
        <button type="submit" formaction="https://www.google.com/">
                <i ></i></button>     
        <button type="submit" formaction="https://www.google.com/">
                <i ></i></button>
    </div>

Hope it Works <3

CodePudding user response：

Add this to your css

form {
  display: inline-block;
}