I'm brand new to HTML and CSS. I'm trying to center two form buttons. Here is my code:
* {
font-family: arial, sans-serif;
}
body {
display: flex;
align-items: column;
}
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
}
.search_area {
display: flex;
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 100%;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
nav {
display: flex;
margin-right: 30px;
margin-top: 15px;
}
.search_box {
text-align: center;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google</title>
<link rel="stylesheet" href="google.css">
</head>
<body>
<nav>
Image Search
Advanced Search
</nav>
<form class="search" action="https://www.google.com/search">
<img id="logo" src="logo.png" alt="Google logo">
<div>
<input name="q" type="text" class="search_area">
</div>
<input type="submit" value="Search Google" class="buttons">
<input type="submit" value="I'm Feeling Lucky" class="buttons">
</form>
</body>
</html>
As you can see, the two buttons beneath the search bar are justified to the left. I thought that text-align: center is the solution. But, this doesn't seem to work.
How do I get these two buttons to center on the screen?
Thanks in advance!
A sample update:
<html lang="en"><head>
<title>Google</title>
<link rel="stylesheet" href="google.css">
</head>
<body>
<nav>
Image Search
Advanced Search
</nav>
<form class="search" action="https://www.google.com/search">
<div style="
"><img id="logo" src="logo.png" alt="Google logo" style=""></div>
<div style="">
<div style="display: flex;align-content: center;">
<input name="q" type="text" class="search_area">
</div>
<div style="">
<input type="submit" value="Search Google" class="buttons">
<input type="submit" value="I'm Feeling Lucky" class="buttons">
</div>
</div>
</form>
</body></html>
CSS:
*{
font-family: arial, sans-serif;
}
body {
/*display: flex;
align-items: column;*/
}
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
}
.search_area {
display: flex;
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 100%;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
nav {
display: flex;
margin-right: 30px;
margin-top: 15px;
}
form{
display: table;
margin-left: auto;
margin-right: auto;
}
.search_box {
text-align: center;
display: block;
}
Use this CSS code:
Just paste it and see the changes.
I have commented the body section and it worked.
*{
font-family: arial, sans-serif;
}
body {
/*display: flex;
align-items: column;*/ /*I have commented the body CSS lines*/
}
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
}
.search_area {
display: flex;
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 100%;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
nav {
display: flex;
margin-right: 30px;
margin-top: 15px;
}
form{
display: table;
margin-left: auto;
margin-right: auto;
}
.search_box {
text-align: center;
display: block;
}
In your body tags don't use display: flex because when you used display flex then text-align: center wouldn't work. In your form tag you have a .search class. for centerizing i used .search { margin: 0 auto; width: 50%}
This is HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google</title>
<link rel="stylesheet" href="google.css">
</head>
<body>
<nav>
Image Search
Advanced Search
</nav>
<form class="search" action="https://www.google.com/search">
<img id="logo" src="logo.png" alt="Google logo">
<div>
<input name="q" type="text" class="search_area">
</div>
<div class="button">
<input type="submit" value="Search Google" class="buttons">
<input type="submit" value="I'm Feeling Lucky" class="buttons">
</div>
</form>
</body>
</html>
And here is Css:
*{
font-family: arial, sans-serif;
}
/* body{display: flex;align-items: column;} */
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
}
.button{
text-align: center;
}
.search_area {
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 100%;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
.search{
margin: 0 auto;
width: 50%;
}
nav {
display: flex;
margin-right: 30px;
margin-top: 15px;
}
.search_box {
text-align: center;
display: block;
}
Related
Just trying to evenly space my text and search bar and also center them horizontally in my navbar. I've manage to center the text and space them out but having trouble centering the search bar horizontally.
Any help would be great!
<nav class="TopNav">
<h1>Locals RUs Pet Store</h1>
<form action="" class="SearchBar">
<input type="text" placeholder="Search here..." name="q" />
<button type="submit">
<img src="/Icons/MagnifierSearchIcon.png" />
</button>
</form>
</nav>
.TopNav{
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-around;
}
.TopNav h1{
padding-left: 200px;
font-family: macho,sans-serif;
font-weight: 900;
font-style: normal;
font-size: 4rem;
}
.SearchBar{
margin: 0 auto;
width: 100%;
max-width: 500px;
height: 40px;
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
background: white;
}
.SearchBar input{
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color: black,
}
.TopNav {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
flex: 1 1 10px;
max-width: 80%;
margin: 0 auto;
align-items: center;
}
.TopNav h1{
padding-left: 0px;
font-family: macho,sans-serif;
font-weight: 900;
font-style: normal;
max-width: 40%;
font-size: 2rem;
}
.SearchBar{
margin: 0 auto;
width: 100%;
max-width: 60%;
height: 40px;
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
background: white;
max-width: 250px;
}
.SearchBar input{
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color: black,
}
<nav class="TopNav">
<h1>Locals RUs Pet Store</h1>
<form action="" class="SearchBar">
<input type="text" placeholder="Search here..." name="q" />
<button type="submit">
<img src="/Icons/MagnifierSearchIcon.png" />
</button>
</form>
</nav>
https://sagarj2021.github.io/first-website/
This is my website but it only open fullscreen in destop of my laptop. It does not open in fullscreen in smartphones destop as well as in normal search. (Actully in smartphone right side is 50% of white blank color). I dont know how to fix this issue..
I have given my code also,
so please can you help mi ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
height: 100vh;
width: 100%;
background-color: black;
background-size: cover;
background-position: center;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo {
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span {
color: red;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover {
color: red;
transition: .4s;
}
.btn {
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover {
transform: scale(1.2);
}
.content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1 {
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3 {
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4 {
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form {
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child {
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child {
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about {
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img {
height: auto;
width: 430px;
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2 {
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5 {
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.service {
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2 {
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i {
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5 {
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p {
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.contact-me {
width: 100%;
height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p {
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
footer {
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1) {
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2) {
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social {
display: flex;
}
.social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover {
transform: scale(1.3);
transition: .3s;
}
.end {
position: absolute;
color: #f9004d;
bottom: 35px;
font-size: 14px;
}
<!--Sagar personal website-->
<!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">
<link rel="stylesheet" href="personalprofile.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34d51c031e.js" crossorigin="anonymous"></script>
<title>Personal website</title>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Blog
</nav>
<div class="content">
<h4>hello, my name is</h4>
<h1>Sagar<span>Jadhav</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newslatter">
<form action="">
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let start">
</form>
</div>
</div>
</div>
<!---About section start-->
<section class="about">
<div class="main">
<img src="#" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer & Designer</h5>
<p>
I am a front-end web developer. I can provide clean code and pixel perfect design. I also make the website more & more interactive with web animations. I can provide clean code and pixel perfect design. I also make the website more & more interactive
with web animations. A responsive design makes your website accessible to all users, regardless of their devices.
</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Service section start-->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!--Contact Me-->
<div class="contact-me">
<p>For any help.</p>
<a class="button-two" href="#">Contact Me</a>
</div>
<!--Footer start-->
<footer>
<p>Sagar Jadhav</p>
<p>For coding and syber security related update follow my blog chennal - please click on the link below to follow me:
</p>
<div class="social">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<p class="end">CopyRight By Sagar Jadhav</p>
</footer>
</body>
</html>
Replace this code in your code
.title h2 {
color: white;
font-size: 75px;
width: 130px;
margin: 30px auto;
text-align: center;
}
This is my html file
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
width: 1000px;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
My question is how can I align the box div align center(horizontally) responsively(dynamically) and how to make this webpage responsive when I checked this page's responsiveness it's not showing responsiveness.
Try this code:
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
width:100%;
margin:0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
What I have done is that I have changed the
.box {
width: 1000px;
}
to
.box {
max-width: 1000px;
width:100%;
margin:0 auto;
}
You can also use display: flexbox; and justify-content: center; in the div box to get almost the same result
Here is the code that I think will work if you want to use flexbox:
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
display: flexbox;
justify-content: center;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
NOTE I have used max-widht: 1000px; in my first method, you can change that as per need.
Change this
.box{
max-width: 1000px;
width:100%;
margin:0 auto;
}
use this but the condition is your parent div has 100% width(window width).
or another way to use flex
form{
width: 200px;
margin: auto;
}
<body>
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here">
<button type="button">Search</button>
</form>
</div>
</body>
You can follow the below code. I try to give some explanation where I changed and why I did it
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 0px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
/*if you want to take result as a responsive then you need to add width as % not fixt size */
width: 100%;
text-align: center;
margin: 0 auto;
}
/*This div for form responsive */
.search-form{
width: 90%;
text-align: center;
margin: 0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 70%; /* I change here for px to % base one your requerment */
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
float: left; /* I change here for div assign as a left */
}
button {
position: relative;
border-radius: 0 25px 25px 0;
width: 30%; /* I change here for px to % base one your requerment */
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
float: left; /* I change here for div assign as a left */
}
<h1>This is my page title...</h1>
<div class="box">
<div class="search-form">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
</div>
display: block fix needs these two blocks to be inserted in the css
.box {
max-width: 1000px;
margin: 0 auto;
}
form {
width: max-content;
margin: 0 auto;
}
Working Fiddle
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
margin: 0 auto;
}
form {
width: max-content;
margin: 0 auto;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
If you are good to go with flexbox implementation, you could wrap your .box in flex and have a justify-content: center; to have an horizontal alignment.
Add the below update in your css for flexbox
.box {
display: flex;
justify-content: center;
}
Working flexbox fiddle
body {
background-color: rgb(231, 59, 59);
font-family: "Alata";
font-size: 20px;
margin: 30px;
}
h1 {
margin-top: 100px;
color: #202124;
text-align: center;
}
.box {
max-width: 1000px;
display: flex;
justify-content: center;
}
input {
position: relative;
display: inline-block;
box-sizing: border-box;
}
input[type="text"] {
background: #fff;
width: 600px;
height: 50px;
padding: 0 10px;
border: none;
outline: none;
border-radius: 25px 0 0 25px;
font-size: 15px;
}
button {
left: -5px;
position: relative;
border-radius: 0 25px 25px 0;
width: 110px;
height: 50px;
border: none;
outline: none;
cursor: pointer;
background: #ffc170;
color: #fff;
font-size: 21px;
}
<h1>This is my page title...</h1>
<div class="box">
<form>
<input type="text" name="" placeholder="Search here" />
<button type="button">Search</button>
</form>
</div>
Please note I have made use of max-width: 1000px; for .box in both examples. This is to make sure that the ui wont fail in the SO fiddle. You can update that as your requirement.
I'm seeing some unexpected behavior from the following HTML/CSS code:
CSS
*{
font-family: arial, sans-serif;
padding: 0px;
margin: 0px;
}
body {
display: flex;
align-items: column;
flex-direction: column;
}
nav {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 30px;
margin-top: 15px;
}
nav a {
font-size: 13px;
color: rgba(0, 0, 0, .87);
text-decoration: none;
cursor: pointer;
padding: 7px;
}
nav a:hover {
text-decoration: underline;
}
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
margin-top: 30px;
}
.buttons:hover {
box-shadow: 0 1px rgb(0 0 0 / 10%);
background-color: #f8f9fa;
border: 1px solid #dadce0;
color: #202124;
}
.search_input_area {
background-color: white;
display: flex;
margin: 0px auto;
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 580px;
position: relative;
padding: 5px;
padding-left: 25px;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
.search_input_area:hover {
box-shadow: 0 2px rgb(0 0 0 / 12%);
background-color: white;
border: 1px solid #dadce0;
color: #202124;
}
.search_box {
text-align: center;
display: block;
}
#google-logo {
margin-top: 200px;
width: 20%;
height: 20%;
}
<nav>
Image Search
Advanced Search
</nav>
<!--SEARCH BOX-->
<form class="search_box" action="https://www.google.com/search">
<img id="google-logo" src="google-logo.png" alt="The Google Logo">
<div>
<input name="q" type="text" class="search_input_area">
</div>
<input type="submit" value="Search Google" class="buttons">
<input type="submit" value="I'm Feeling Lucky" class="buttons">
</form>
When I hover over the search box, the background is white (as expected). However, when I type some text in the search box, the background color changes to rgb(232, 240, 254) according to the inspector. It seems as though the background color is being overwritten somewhere in the CSS.
Does anyone see why this is happening?
Thanks in advance!
Chrome changes the background of input fields if you choose a "remembered" option.
You can prevent this by customizing the :webkit-autofill pseudo class:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
<input name="username">
In your case:
*{
font-family: arial, sans-serif;
padding: 0px;
margin: 0px;
}
body {
display: flex;
align-items: column;
flex-direction: column;
}
nav {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 30px;
margin-top: 15px;
}
nav a {
font-size: 13px;
color: rgba(0, 0, 0, .87);
text-decoration: none;
cursor: pointer;
padding: 7px;
}
nav a:hover {
text-decoration: underline;
}
.buttons {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
display: inline-block;
margin-top: 30px;
}
.buttons:hover {
box-shadow: 0 1px rgb(0 0 0 / 10%);
background-color: #f8f9fa;
border: 1px solid #dadce0;
color: #202124;
}
.search_input_area {
background-color: white;
display: flex;
margin: 0px auto;
color: rgba(0, 0, 0, .87);
border: 1px solid #ddd;
width: 580px;
position: relative;
padding: 5px;
padding-left: 25px;
height: 34px;
font-size: 16px;
border-radius: 25px;
}
.search_input_area:hover {
box-shadow: 0 2px rgb(0 0 0 / 12%);
background-color: white;
border: 1px solid #dadce0;
color: #202124;
}
.search_box {
text-align: center;
display: block;
}
#google-logo {
margin-top: 200px;
width: 20%;
height: 20%;
}
.search_input_area:-webkit-autofill,
.search_input_area:-webkit-autofill:hover,
.search_input_area:-webkit-autofill:focus,
.search_input_area:-webkit-autofill:active
{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="search.css">
</head>
<body>
<!--NAVIGATION LINKS-->
<nav>
Image Search
Advanced Search
</nav>
<!--SEARCH BOX-->
<form class="search_box" action="https://www.google.com/search">
<img id="google-logo" src="google-logo.png" alt="The Google Logo">
<div>
<input name="q" type="text" class="search_input_area">
</div>
<input type="submit" value="Search Google" class="buttons">
<input type="submit" value="I'm Feeling Lucky" class="buttons">
</form>
</body>
</html>
I am making 2 forms on 1 page and i want them to be next to each other, I got them next to each other when no comment is placed, but whenever I place a comment they are getting placed under each other.
This is my HTML and CSS code:
body {
background-color: #edf0f2;
}
textarea {
display: inline-block;
width: 630px;
height: 120px;
background-color: #fff;
border-color: #5bb112;
margin-top: 10px;
margin-left: 15px;
position: relative;
resize: none;
}
.Changelog {
margin-left: 15px;
width: 800px;
}
.comment-box {
width: 630px;
padding-top: 5px;
margin-bottom: 4px;
background-color: #fff;
border-radius: 1px;
position: absolute;
border: 1px solid #5bb112;
margin-top: 8px;
align-content: left;
}
.comment-box p {
font-family: arial;
font-size: 14px;
line-height: 16px;
color: #282828;
font-weight: 100;
margin-bottom: 10px;
margin-left: 5px;
}
* {
margin: 0;
padding: 0;
}
/*-------Changelog---------*/
#maindiv {
display: flex;
width: 100%;
height: 100%;
border: 1px solid black;
overflow: hidden;
}
#first {
width: 50%;
}
#second {
width: 50%
}
.changelog-box {
width: 630px;
padding-top: 5px;
margin-bottom: 4px;
background-color: #fff;
border-radius: 1px;
position: absolute;
border: 1px solid #5bb112;
margin-top: 8px;
align-content: left;
}
.changelog-box p {
font-family: arial;
font-size: 14px;
line-height: 16px;
color: #282828;
font-weight: 100;
margin-bottom: 10px;
margin-left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='maindiv'>
<div id='first'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-04'>
<textarea name='message'></textarea><br>
<button type='submit' name='commentSubmit'> Comment </button>
</form>
</div>
<div id='second'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-04'>
<textarea name='message'></textarea><br>
<button type='submit' name='changelogSubmit'> Comment </button>
</form>
</div>
</div>
</body>
</html>
I would like they have my 2 forms with comment section next to each other.