I want to make my html/css search bar responsive for example iphone 11.
Search button drops down after hovering over it, when i open it from my phone.
Here's the link: https://irinachikviladze.github.io/
How can I make it responsive using CSS?
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
So just overwrite the default display for your search box and set it to flex with flex-direction: row;
that's it.
body{
margin: 0;
padding: 0;
background:#e74c3c;
}
.search-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #34495e;
height: 40px;
border-radius: 40px;
padding: 10px;
display: flex;
flex-direction: row;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn{
background : white ;
}
.search-btn{
color: #e74c3c;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background:#34495e;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
overflow: hidden;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
/* responsive*/
#media only screen and (max-width: 828px){
.search-box:hover > .search-txt{
width: 125px;
}
}
<body>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</div>
</body>
Html element
<div class="Card">
<div class="CardInner">
<label>Search for your stack :)</label>
<div class="container">
<div class="Icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#657789" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</div>
<div class="InputContainer">
<input placeholder="search here...."/>
</div>
</div>
</div>
</div>
CSS Element
#import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap');
#import url('https://fonts.googleapis.com/css?family=Hind&display=swap');
* {
-webkit-font-smoothing: antialiased;
color: #acbdce;
}
:root {
--border-radius: 10px;
}
body, html {
background: #e2e9f4;
display: grid;
height: 100%;
grid-template: 1fr/100%;
place-items: center;
}
.Card {
padding: 1px;
border-radius: var(--border-radius);
background: linear-gradient(-67deg, rgba(#c8d8e7, .7), rgba(255,255,255,.8));
overflow: hidden;
box-shadow:
-2px -2px 6px rgba(#fff, .6),
2px 2px 12px #c8d8e7;
width: 380px;
}
.CardInner {
padding: 16px 16px;
background-color: #e2e9f4;
border-radius: var(--border-radius);
}
.container {
display: flex;
}
.Icon {
min-width: 46px;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
margin-right: 12px;
box-shadow:
-2px -2px 6px rgba(#fff, .6),
2px 2px 12px #c8d8e7;
svg {
transform: translate(-1px, -1px);
}
}
label {
font-family: "Hind", sans-serif;
display: block;
color: #3c4b66;
margin-bottom: 12px;
background: linear-gradient(45deg, rgba(#6b7b8f, 1), #3c4b66);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.InputContainer {
width: 100%;
}
input {
background-color: #e3edf7;
padding: 16px 32px;
border: none;
display: block;
font-family: 'Orbitron', sans-serif;
font-weight: 600;
color: #a9b8c9;
-webkit-appearance: none;
transition: all 240ms ease-out;
width: 100%;
&::placeholder {
color: #6d7f8f;
}
&:focus {
outline: none;
color: #6d7f8f;
background-color: lighten(#e3edf7, 3%);
}
};
.InputContainer {
--top-shadow: inset 1px 1px 3px #c5d4e3, inset 2px 2px 6px #c5d4e3;
--bottom-shadow: inset -2px -2px 4px rgba(255,255,255, .7);
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
&:before,
&:after {
left: 0;
top: 0;
display: block;
content: "";
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
}
&:before {
box-shadow: var(--bottom-shadow);
}
&:after {
box-shadow: var(--top-shadow);
}
}
Related
I want to place a button inside my input exactly like this:
So far I have the input but I'm unable to find a solution to place the button properly.
.realoutercontainer {
padding: 10% 0;
position:relative;
}
.outercontainer {
direction: rtl;
text-align: center;
position: relative;
z-index: 1;
max-width: 1040px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
border-bottom: 2px solid rgba(207,215,223,.25);
position: relative;
background-color: #fff;
border-radius: 30px;
padding: 30px 40px 10px 40px;
-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3);
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3);
box-sizing: border-box;
color: #6c6770;
font-family: "Vazir";
}
.realoutercontainer.settings{
padding: 2% 0;
}
.settings .outercontainer {
max-width: 100%;
width: 94%;
height: 600px;
padding: 100px;
padding-top: 50px;
}
.settings-input {
margin: 50px 0;
display: flex;
justify-content: center;
}
.settings-input input {
display: inline-block;
direction: ltr;
text-align: center;
outline: none;
width: 300px;
background: #ededed;
color: #743db0;
padding: 5px 5px;
border-radius: 3px;
border: solid 1px;
border-color: transparent;
transition: all 0.3s ease-in;
}
.settings-input input:focus {
color: #8e5bc5;
background: #fff;
border-color: #e7572c;
}
.settings-input .input-field {
display: flex;
flex-direction: column ;
}
.settings-input .uname{
align-self: flex-start;
margin-bottom: 3px;
}
<div class="realoutercontainer settings">
<div class="outercontainer">
<div class="settings-input">
<div class="input-field">
<div for="fname" class="uname">نام کاربری :</div>
<div><input type="text" id="fname" name="fname" placeholder="user_1252442"/></div>
<button type="submit">ویرایش</button>
</div>
</div>
</div>
</div>
div,
form,
input {
position: relative;
}
.container {
width: 400px;
display: flex;
padding: 0.5rem;
align-items: center;
background-color: coral;
}
input {
width: 100%;
padding: 1rem;
border: 1px solid black;
}
button {
position: absolute;
right: 1rem;
}
<form>
<label> نام کاربری : </label>
<br />
<div class="container">
<input type="text" placeholder="Some Text..." />
<button type="submit"> Submit </button>
</div>
</form>
You can change the styles or whatever you want accordingly. I showed how its done.
Here goes, follow the code, I hope it helps you.
It is not styled, it is in raw form.
input {
position: absolute;
height: 2.3em;
}
.group-wrapper {
width: 50em;
display: flex;
align-items: center;
}
.content {
padding-left: 7em;
background: #EDEDED;
border: none;
border-radius: 0.2em;
}
.uname {
margin:0 9em 0.5em;
display: inline-block;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
button {
position: relative;
justify-content: start;
color: #E1E5ED;
background: #ED1C24;
padding: 0.4em;
margin-left: 0.5em;
border: none;
}
<form>
<label for="user" class="uname">نام کاربری :</label>
<div class="group-wrapper">
<input id="user" class="content" type="text" placeholder="user_1252442" />
<button type="submit">ویرایش</button>
</div>
</form>
Shamelessly borrowing from #Kunal, this version puts the button on the left as desired:
div,
form,
input {
position: relative;
}
.container {
width: 400px;
display: flex;
padding: 0.5rem;
align-items: center;
}
input {
width: 100%;
padding: 1rem;
padding-left: 100px;
border: 1px solid black;
}
button {
position: absolute;
left: 1rem;
}
<form>
<label> نام کاربری : </label>
<br />
<div class="container">
<input type="text" placeholder="Some Text..." />
<button> My button </button>
</div>
</form>
I'm a new to css and i really can't fix all as i want...
How can i align vertical the h1 to the start of user form?
but most important problem for me is that i can't center good the check and the link, i want it one below the other and centered in the div.
I'm not sure if i have positioned good the div but i want it centred but not too low on the page.
thanks to everyone!
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
input[type=text],
input[type=password]{
width: 65%;
display: table;
margin: 0 auto;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
width: 65%;
height: 20%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display:block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
</head>
<body>
<div class="container">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
<hr>
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</body>
</html>
If you set the h1 to the same width of the button and use "margin: 0 auto" to center it, this will make the h1 span the width of the button, and by default the text will be left aligned to the start of the button.
h1 {
font-size: x-large;
width: 65%;
margin: 0 auto;
}
I'm not too sure exactly what you want to do with the check section. If you use "text-align: center", this will center it, or use the same code as above to align it with the buttons.
you can use text-align: center; and vertical-align:top;
If your problem still exists, please explain more clearly what you want.
Use text-align: center; to center text within container.
To make it easier to align your elements, just wrap them into one div and adjust the div with CSS instead of dealing with each single element.
Here is an example of what you can do.
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
.form {
width: 75%;
margin: auto;
}
.form-bottom {
text-align: center;
}
input[type=text],
input[type=password] {
display: table;
margin: 0 auto;
width: 100%;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
height: 20%;
width: 100%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display: block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<body>
<div class="container">
<div class="form">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
</div>
<hr>
<div class="form-bottom">
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</div>
</body>
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
I have been trying for hours with different methods to get my navigation buttons to be mobile-responsive and collapse in a specified vertical order. I want the nav buttons to collapse in a vertical column below the two logos, once the screen size is shrunken (to around 500px). How do I fix my code to achieve this?
.container-fluid {
border: 1px solid #000000;
max-width: 1600px;
overflow: hidden;
}
.wrap {
/*background-color: yellow;*/
/*overflow: hidden;*/
}
.Logos {
width: 312px;
display: inline-block;
/*background-color: blue;*/
}
/*
.Logos img{
max-width: 300px;
height: auto;
}
*/
.nav.wrap.one {
display: inline-block;
/*background-color: green;*/
float: right;
margin-top: 25px;
}
ul.navigation {
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two {
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
height: 550px;
margin: auto;
}
.floater.box {
background-color: rgba(255, 255, 255, .40);
border-radius: 10px;
/*opacity: .45;*/
max-width: 75%;
height: 200px;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
}
.form-search {
margin: 0 auto;
text-align: center;
font: bold 13px sans-serif;
max-width: 325px;
position: relative;
}
.form-search input {
width: 230px;
box-sizing: border-box;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
background-color: #ffffff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 14px 15px 14px 40px;
border: 1px solid #b6c3cd;
;
border-right: 0;
color: #4E565C;
outline: none;
margin-top: 70px;
-webkit-appearance: none;
}
.form-search button {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
background-color: #6caee0;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
color: #ffffff;
padding: 15px 22px;
margin-left: -4px;
cursor: pointer;
border: none;
outline: none;
}
.form-search i {
position: absolute;
top: 15px;
left: 20px;
font-size: 16px;
color: #80A3BD;
}
/* Placeholder color */
.form-search input::-webkit-input-placeholder {
color: #879097;
}
.form-search input::-moz-placeholder {
color: #879097;
opacity: 1;
}
.form-search input:-ms-input-placeholder {
color: #879097;
}
.nav.wrap.two {
display: inline-block;
text-align: center;
width: 100%;
margin-top: 10px;
}
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" />
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div>
<div class="nav wrap one">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE">LOG IN</li>
<li id="NAV-TWO">BUY A HOME</li>
<li id="NAV-THREE">SELL A HOME</li>
<li id="NAV-FOUR">CONTACT US</li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<form class="form-search" method="get" action="#">
<input type="search" name="search" placeholder="I am looking for..">
<button type="submit">Search</button>
<i class="fa fa-search"></i>
</form>
</div>
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class="nav wrap two">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A">MY LISTINGS</li>
<li id="NAV-B">COMMUNITIES SERVED</li>
<li id="NAV-C">PROPERTIES</li>
</ul>
</div>
</div>
</div>
Here is a link to my CodePen: https://codepen.io/IDCoder/full/rGWeEE/
CSS is all about be natural order, natural position, natural styles... what I means is that your code isn't being natural, you can see here:
.navigation li {
display: inline-block;
}
.navigation a {
padding: 12px 20px;
}
I want to focus me in those properties because here we are saying:
You <a> element that are inside this man -> <li> (<li id="NAV-ONE">LOG IN</li>), yes you! You will be bigger even if you're inside him!
Well, in real life, we can't put bigger things into smaller spaces. What happens in real life and CSS is: smaller things into bigger things.
So if we make this change:
.navigation li {
display: inline-block;
padding: 12px 20px;
}
.navigation a {
/* We changed who is bigger than who */
}
It takes a natural order (because now the spaces where .navigation a will be is bigger than him). The final code is something like this (this will wrap when you use phone):
.navigation li {
display: inline-block;
padding: 12px 20px;
background: linear-gradient(#49708f, #293f50);
background: #395870;
border-right: 1px solid rgba(0, 0, 0, .3);
}
.navigation a {
color: #fff;
text-decoration: none;
}
More
I was playing and I found this cool way to wrap when screen is small, I think it's cool:
#media all and (max-width: 500px){
ul.navigation{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}
Also, remember that when you want to make responsive design you need meta:viewport into your html's head:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
I'm trying to absolute position a button underneath a textarea, I have some content next to the button I'd like to have it not push down.
html {
background: #1f252e;
color: white;
font-family: sans-serif;
}
.commentForm {
position: relative;
}
.textInput {
padding: 10px;
background: rgba(0, 0, 0, 0.08);
border: solid 1px rgba(255, 255, 255, 0.05);
position: relative;
border-radius: 2px;
height: 55px;
overflow: hidden;
z-index: 1;
}
.textInput__input {
color: white;
width: 100%;
resize: none;
font-size: 14px;
font-family: 'Roboto', sans-serif;
background: transparent;
margin: 0px;
outline: none;
border: none;
display: block;
}
.textInput:hover {
cursor: text;
background: rgba(255, 255, 255, 0.05);
}
.formField.hasErrors .wd-input {
border-color: #e43e22;
}
.wd-form__footer {
margin-top: 15px;
display: flex;
}
.formField__error {
margin-top: 15px;
font-size: 13px;
color: #e43e22;
}
.wd-button--primary {
background: rgba(0, 0, 0, 0.25);
height: 35px;
min-width: 50px;
padding: 10px;
position: relative;
border-radius: 2px;
overflow: hidden;
z-index: 1;
font-size: 14px;
}
.wd-button {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
box-sizing: border-box;
}
.wd-form__status {
flex-grow: 1;
}
.commentForm__actions {
position: absolute;
top: 90px;
right: 0px;
}
<div class="commentForm wd-form">
<div class="form">
<div class="formField hasErrors" style="max-width: 100%;">
<div class="textInput wd-input ">
<textarea rows="3" class="textInput__input" placeholder="Type a comment..."></textarea>
</div>
<div class="formField__error">15 more characters to go...</div>
</div>
<div class="wd-form__footer">
<div class="wd-form__status">
<div class="formStatus"></div>
</div>
<div class="commentForm__actions wd-form__actions">
<a role="button" class="wd-button wd-button--primary">
<div class="wd-button__label">Post comment</div>
</a>
</div>
</div>
</div>
</div>
Now, in Firefox and Chrome I get very different results.
In Chrome the button is aligned properly:
But in firefox, the button is clipping with the textarea:
This is because the text area height is different in Firefox than it is in Chrome. How do I fix this?
I tend to stay away from position: absolute if I can. You can instead use float: right and a negative margin.
html {
background: #1f252e;
color: white;
font-family: sans-serif;
}
.commentForm {
position: relative;
}
.textInput {
padding: 10px;
background: rgba(0, 0, 0, 0.08);
border: solid 1px rgba(255, 255, 255, 0.05);
position: relative;
border-radius: 2px;
height: 55px;
overflow: hidden;
z-index: 1;
}
.textInput__input {
color: white;
width: 100%;
resize: none;
font-size: 14px;
font-family: 'Roboto', sans-serif;
background: transparent;
margin: 0px;
outline: none;
border: none;
display: block;
}
.textInput:hover {
cursor: text;
background: rgba(255, 255, 255, 0.05);
}
.formField.hasErrors .wd-input {
border-color: #e43e22;
}
.wd-form__footer {
margin-top: -15px;
}
.formField__error {
margin-top: 15px;
font-size: 13px;
color: #e43e22;
}
.wd-button--primary {
background: rgba(0, 0, 0, 0.25);
height: 35px;
min-width: 50px;
padding: 10px;
position: relative;
border-radius: 2px;
overflow: hidden;
z-index: 1;
font-size: 14px;
}
.wd-button {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
box-sizing: border-box;
}
.wd-form__status {
flex-grow: 1;
}
.commentForm__actions {
position: absolute;
top: 90px;
right: 0px;
}
<div class="commentForm wd-form">
<div class="form">
<div class="formField hasErrors" style="max-width: 100%;">
<div class="textInput wd-input ">
<textarea rows="3" class="textInput__input" placeholder="Type a comment..."></textarea>
</div>
<div class="formField__error">15 more characters to go...</div>
</div>
<div class="wd-form__footer">
<div class="wd-form__status">
<div class="formStatus"></div>
</div>
<div class="commentForm__actions wd-form__actions">
<a role="button" class="wd-button wd-button--primary">
<div class="wd-button__label">Post comment</div>
</a>
</div>
</div>
</div>
</div>