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.
Related
I am trying to put the horizontal bar beneath the text title where is inside of the container <div> but the horizontal bar just effect in the width, but not moving up to the position...
I am hesitating that should I create one more div. I have been trying to move up the hr by top with vh or even margin, but that is not workable.
What I want is to move the hr below the title.
How I want the hr to move up
Original
.topcon {
background-color: #f6f5f5;
position: relative;
width: 250px;
height: 250px;
border: 15px;
padding: 50px;
margin: 180px auto 150px auto;
border-radius: 20px;
}
.pattern-card {
position: relative;
right: 50px;
border-radius: 20px 20px 0px 0px;
bottom: 50px;
}
.victor {
position: relative;
background-color: #ffffff;
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-left: 50px;
margin-right: auto;
bottom: 110px;
width: 50%;
}
.user-name {
position: absolute;
width: 30%;
left: 20vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #2d3248;
font-size: 18px;
}
.user-age {
position: absolute;
width: 20%;
right: 15.5vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
font-size: 18px;
}
.user-location {
position: absolute;
width: 25%;
left: 22.5vh;
top: 45.5vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
}
hr {
border-top: 1px solid #969696;
width: 100%;
bottom: 50vh;
}
<div class="topcon">
<img class="pattern-card" src="images/bg-pattern-card.svg" alt="pattern card at the frame." />
<img class="victor" src="images/image-victor.jpg" alt="image for Victor" />
<p class="user-name">Victor Crest</p>
<p class="user-age">26</p>
<p class="user-location">London</p>
<hr /> 80K Followers 803K Likes 1.4K Photos
</div>
Try with this
hr{
border-top: 1px solid #969696;
margin-left: -50px;
width: 350px;
margin-top: -15px;
}
change the margin top and width and margin left according to your div width and height
You can also dismiss the horizontal ruler (line) entirely, and use CSS border-top. I tried and got this:
body {
font-family: "Open Sans", sans-serif;
}
body * {
box-sizing: border-box;
}
.card {
width: 300px;
height: 320px;
margin: 20px auto;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.card-header {
height: 105px;
background: #44d3d9;
}
.card-image {
margin-top: -50px;
}
.card-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 100px;
height: auto;
border: 4px solid #fff;
}
.card-content h2 {
font-size: 14px;
margin-bottom: 5px;
}
.card-content h2 span {
color: #6d6d6d;
padding-left: 6px;
}
.card-content .location {
margin: 0;
font-size: 13px;
color: #6d6d6d;
}
.card-footer {
display: flex;
margin-top: auto;
height: 90px;
border-top: 1px solid #efefef;
}
.card-footer > div {
flex-grow: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #efefef;
}
.card-footer > div:last-child {
border-right: none;
}
.card-footer ul {
margin: auto 0;
padding: 0;
list-style-type: none;
}
.card-footer ul li {
color: #6d6d6d;
font-size: 11px;
}
.card-footer ul li.count {
color: #111111;
font-size: 16px;
font-weight: 600;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="card">
<div class="card-header"></div>
<div class="card-image">
<img src="https://randomuser.me/api/portraits/men/91.jpg" alt="">
</div>
<div class="card-content">
<h2>Victor Crest <span>26</span></h2>
<p class="location">London</p>
</div>
<div class="card-footer">
<div>
<ul>
<li class="count">80K</li>
<li>Folowers</li>
</ul>
</div>
<div>
<ul>
<li class="count">803K</li>
<li>Likes</li>
</ul>
</div>
<div>
<ul>
<li class="count">1.4K</li>
<li>Photos</li>
</ul>
</div>
</div>
</div>
I want to achieve drop-down button as per following design image. See drop-down menu starts just after middle of button. My problem is that button has transparent background to utilize background image from root parent div.
So far I have achieved following image. As I said above, I want to achieve white edges outside of border-radius.
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 185px;
margin: auto;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
Any suggestion would be really helpful.
Use ::after ::before pseudo elements for the dropdown and apply separate background-image as marked in the image. Apply position:absolute and align then in the top left and right corners based on the design.
It's very simple. You have achieved almost 99%. Just add below styles to your CSS of .div-user-header-list as below:
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
padding-top: 20px;
margin-top: -20px;
z-index: -1;
}
See the updated fiddle here: https://jsfiddle.net/8ukj3wy1/1/
Check this one out:
https://jsfiddle.net/sLy7fnzg/
Essentially use a negative margin to move the .div-user-header-list up and use relative positioning to enable z-indexes.
Also, to resolve the issue with the half border, remove the border from the .div-user-header-1 and add a whole element as a ::before to the .div-user-header like so:
.div-user-header::before {
content: "";
background: #9CB2C7;
width: 210px;
height: 30px;
display:block;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
z-index: 1;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
body{
background-color: grey;
}
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 203px;
margin: auto;
overflow: hidden;
/*background-color: #fff;*/
}
.div-user-header-list:before,
.div-user-header-list:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.div-user-header-list:before {
/*right: -20px;*/
left: 1px;
top: -10px;
border-radius: 0 0 0 10px;
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
-webkit-box-shadow: -10px 0 0 0 #fff;
box-shadow: -10px 0 0 0 #fff;
}
.div-user-header-list:after {
/*left: -20px;*/
right: 1px;
top: -10px;
border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
-webkit-box-shadow: 10px 0 0 0 #fff;
box-shadow: 10px 0 0 0 #fff;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
/*margin-top: -14px;
z-index: -9;
padding-top: 14px;*/
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
</style>
</head>
<body>
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
</body>
</html>
I am making a responsive login page and i did everything correctly this is my html code
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
bottom: 0;
transform: translate(-0, 0);
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
When I resize the screen down to 730 pixel that works correct but my text in form-left-side goes up and there is not something that I can scroll and my text first lines are not visible
notice that i don't wanna take my min-height to lower and i want it to be 300 px if you can help me thank you
and loook also when it is runing on snippet on this site you can not scroll up so that is a problem
and my browser is opera
Your problem happens because you are absolutely positioning from the bottom of the page, changing it to top solves the problem. :)
Also you can add position: relative to your media query, to make sure it won't go out of screen. :)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
top: 0;
transform: translate(0, 0);
position: relative;
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
I have a requirement of displaying the image/icon on top of the modal box in a semicircle. Though I have achieved it with the help of below code, but the only issue is whenever my form in the modal box goes for a validation check, displaying any error, my semicircle doesn't get adjusted accordingly, rather it stays at its position. Here, I have attached the screen shot of what exactly I am looking for and HTML/css code I have used to display the semicircle with image/icon at the top.
.modal {
font-family: Avenir-Medium;
font-size: 16px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
display: block;
/*Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.3);
/* Black w/ opacity */
-webkit-animation-name: slideIn;
/* Fade in the background */
-webkit-animation-duration: 2.0s;
/* Fade in the background */
;
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 92%;
left: 14px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
border-radius: 16px 16px 0px 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
top: auto;
}
.modal-wrapper {
line-height: 45px;
border: 1px solid #e7e9ea;
border-radius: 6px 6px 0px 0px;
background-color: white;
margin: auto;
}
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border-left: 1px solid #e7e9ea;
border-top: 1px solid #e7e9ea;
border-right: 1px solid #e7e9ea;
border-bottom: 3px solid white;
bottom: 300px;
}
.close-btn {
position: absolute;
vertical-align: top;
top: 4px;
left: 320px;
width: 18px;
height: 18px;
}
.container-div-creditCard {
margin: 12px 20px 0px 20px;
}
.container-div-creditCard>img {
position: absolute;
bottom: 154px;
right: 30px;
}
.credit-card-modal-label {
font-family: AvenirHeavy;
font-size: 13px;
color: #1d3444;
text-align: center;
font-weight: 200;
height: 24px;
margin-left: 31px;
}
.input-modal {
width: 100%;
height: 44px;
}
.input-spacing {
margin-top: 15px;
}
.credit-input-modal {
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
padding: 13px 42px 12px 15px;
}
.credit-expiry-input-modal {
padding: 13px 27px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
display: inline-block;
line-height: initial;
width: 65%;
height: 44px;
}
.credit-cvc-input-modal {
width: 30%;
padding: 17px 5px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
height: 44px;
}
.cvvDisc {
-webkit-text-security: disc;
}
.credit-submit-button {
width: 100%;
padding: 13px;
margin-top: 15px;
border: solid 1px #e7e9ea;
border-radius: 5px 5px 5px 5px;
background: linear-gradient(to right, #e32490, #ed1a3d);
color: white;
margin-bottom: 20px;
font-family: Avenir-Book;
font-weight: normal;
font-size: 14px;
line-height: initial;
}
.errorMsg {
font-family: Avenir-Book;
font-weight: normal;
color: #ED1A3D;
font-size: 12px;
}
<div id="modalCCDetails" class="modal">
<div class="modal-content modal-wrapper">
<div class="container-div-creditCard">
<label class="credit-card-modal-label">ENTER YOUR CREDIT CARD DETAILS</label>
<input name="cc_name" class="input-modal credit-input-modal" type="text" placeholder="Name printed on Credit Card" onChange={this.handleUserInput} />
<span class="errorMsg"></span>
<input name="cc_number" class="input-modal credit-input-modal input-spacing" type="tel" maxLength="16" onKeyPress={(e)=> this.handleCCOnKeyPress(e)} placeholder="16 digit credit card number" />
<span class="errorMsg"></span>
<input name="cc_expDate" class="credit-expiry-input-modal" type="text" placeholder="Expiry MM-YYYY" />
<div class="device-divider" />
<input name="cc_cvc" class="credit-cvc-input-modal cvvDisc" type="tel" placeholder="CVC" maxLength="3" />
<span class="errorMsg"></span>
</div>
<button class="credit-submit-button">Submit Payment</button>
</div>
</div>
</div>
NOTE: This is a mobile view screenshot
Just adjust your css code into something like this:
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border: 1px solid #e7e9ea;
border-bottom: 3px`enter code here` solid white;
top: -48px;
}
Just remove the bottom: 300px; and replace with top: -48px; or any value that you want.
please add top:-15px; and removed bottom:300px; in class .modal-wrapper::after { top: -15px; }, u will see the image move up
I'm having troubles with positioning the textbox for my chat. I can only make it look good for one specific resolution. On other screen sizes it just looks terrible. How can I adjust the position of the textbox for all resolutions (>1360px) to fit in the little darkgrey area on the bottom. When I try to adjust it for one resolution it won't look good on the other resolutions.
https://jsfiddle.net/4pvfwz11/1/
<div class="chatdiv hidden-xs hidden-sm col-lg-2 col-md-3 pull-right" data-spy="affix">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
<ol class="chat">
<div id="fullchat">
<li class="bot"><div class="avatar"><img src="'+msg.avatar+'" draggable="false"/></div><div class="msg"><div class="name">Username</div><p>The chat text should come here..........</p><time><i class="fa fa-clock-o" aria-hidden="true"></i>19:00</time></div></li>
</div>
<div class="chat_error"></div>
</ol>
</div>
<div class="toggle-sound"></div>
<input class="textarea" id="chat_textbox" type="text" placeholder="Enter message here"/>
<style type="text/css">
div.chat_error {
color: #e20f0f;
padding-left: 10px;
padding-top: 1rem;
}
.chatdiv
{
position: fixed;
left: 40px;
background-color: #101010;
height: 90vh;
}
.chatdiv .name{
top: 3px;
left: 110px;
font-size: 10px;
font-weight: bold;
color: rgba(256,256,256,0.80);
cursor: default;
}
/* M E S S A G E S */
.chat {
list-style: none;
background: none;
margin: 0;
padding: 0 0 50px 0;
margin-top: 60px;
margin-bottom: 10px;
}
.chat li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
.chat .avatar img {
margin-top: 15px;
width: 40px;
height: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
background-color: rgba(255,255,255,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.other .msg {
order: 1;
border-top-left-radius: 0px;
box-shadow: -1px 2px 0px #187006;
margin-left: 10px;
background-color: #27af0c;
}
.self {
justify-content: flex-end;
align-items: flex-end;
}
.self .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #0a95db;
box-shadow: 1px 2px 0px #055f8c;
margin-left: 10px;
}
.bot .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #a50808;
box-shadow: 1px 2px 0px #6b0606;
margin-left: 10px;
}
.msg {
background: white;
min-width: 50px;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}
.msg p {
font-size: 15px;
margin: 0 0 0.2rem 0;
color: white;
}
.msg time {
font-size: 10px;
color: #ccc;
margin-top: 3px;
float: right;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* T Y P E */
input.textarea {
position: absolute;
width: 89%;
height: 50px;
left: 15px;
bottom: 3vh;
background: white;
border: none;
outline: none;
padding-left: 10px;
padding-right: 10px;
color: #666;
font-weight: 400;
}
div.toggle-sound {
position: fixed;
bottom: 13vh;
left: 65px;
font-weight: bold;
font-size: 20px;
}
.scrollbar
{
float: left;
height: 80vh;
background-color: #232323;
overflow-y: scroll;
margin-bottom: 25px;
width: 100%;
}
.force-overflow
{
min-height: 90vh;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #232323;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #232323;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E20F0F;
}
</style>
If you want different CSS for different screen sizes you can use something called media queries. I don't know exactly what rules you want to change for different screen sizes, but let's do a quick example. Let's say you want to make the background color of the textbox red on screens with a width less than or equal to 900px. This can be done with the following media query:
#media (max-width: 900px) {
input.textarea {
background-color: red;
}
}
So what you can do is just to figure out what CSS changes you want to do on different screen sizes, and then make media queries for all of them. You can read more about media queries here.