How Do I Make These Buttons in a Row Instead of a Column and How Do I Scale Everything?
Question
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 class="container"> <div class="header"> <h1> <span class="title">Julian Sanchez</span><br> <span class="subtitle">CS @ FSU</span> </h1> </div> <div class="btn-group"> <form> <button type="submit" formaction="https.//www.google:com/"> <i class="fa-brands fa-linkedin"></i></button></form> <form> <button type="submit" formaction="https.//www.google.com/> <i class="fa-brands fa-linkedin"></i></button></form> </div> </div> </body> </html>
3 answers
solution1
1 2022-07-30 07:07:54
Learn flexbox it will make your life much easier.Moreover you dont need form tag for buttons.
<div class="btn-group" style="display: flex; flex-direction:column" >
<button type="submit" formaction="https://www.google.com/">
<i class="fa-brands fa-linkedin"></i></button>
<button type="submit" formaction="https://www.google.com/">
<i class="fa-brands fa-linkedin"></i></button>
</div>
Hope it Works <3
solution2
0 2022-07-30 08:50:20
Add this to your css
form {
display: inline-block;
}
solution3
-1 2022-07-30 05:25:51
I am also new to HTML but I think you can try changing the button's display attribute from block to inline
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.