body {
margin: 0px;
border: 1px solid black;
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border: 1px solid black;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.contianer {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.ops {
display: flex;
justify-content: center;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#list ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#list li {
float: left;
padding: 0px;
margin: 0px;
}
#list li:hover {
background-color: lightgrey;
}
#list {
display: flex;
justify-content: center;
margin: 10px;
}
form {
padding: 0px;
margin: 0px;
}
.dhund {
display: flex;
justify-content: center;
padding: 10px;
}
input[name="name"] {
max-height: 37px;
max-width: 400px;
min-width: 200px;
border-radius: 10px;
font-size: 17px;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
input[name="search"] {
background-color: rgb(183, 242, 184);
font-size: 15px;
border: 1px solid black;
border-radius: 5px;
color: black;
}
input[name="logout"],
input[name="chat"],
input[name="update"],
input[name="homepage"],
input[name="event"] {
background-color: white;
border: none;
padding: 10px 19px;
}
input[name="logout"]:hover,
input[name="chat"]:hover,
input[name="update"]:hover,
input[name="homepage"]:hover,
input[name="event"]:hover {
background-color: lightgrey;
}
.content {
display: flex;
flex-direction: row;
}
.sidebar {
display: flex;
flex-direction: column;
border-right: 1px solid black;
height: 100%
}
#image {
margin: 2px;
padding: 5px;
display: flex;
justify-content: center;
}
#image img {
border: 1px solid black;
}
#upload {
border-top: 1px solid black;
margin: 2px;
min-width: 250px;
}
#upload p {
text-align: center;
}
#stupid {
display: flex;
justify-content: center;
margin: 5px;
}
.material {
margin: 20px;
min-width: 400px;
border: 1px solid black;
border-radius: 10px;
background-color: lightgrey;
}
.posts {
border: 1px solid black;
margin: 17px;
margin-top: 80px;
border-radius: 7px;
}
.feed {
padding: 20px;
}
.post p {
padding: 5px;
}
.poster {
padding-left: 10px;
border-bottom: 1px solid black;
}
.poster p {}
#matter p {
text-indent: 30px;
}
#matter {
border: 1px solid black;
margin: 8px;
background-color: white;
border-radius: 20px;
padding: 20px;
}
.main {
display: flex;
flex-direction: column;
margin: 5px;
width: 100%;
}
/*#mind
{
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid black;
border-radius: 8px;
background-color: lightgrey;
}*/
textarea[name="mind"] {
border-radius: 10px;
border: 1px solid black;
font-size: 15px;
padding: 10px 5px 10px 5px;
}
input[name="post"] {
width: 120px;
height: 50px;
background-color: powderblue;
font-size: 17px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div class="contianer">
<div class="ops">
<div id="list">
<ul>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>
</li>
</ul>
</div>
</div>
<div class="dhund">
<form method="POST" action="homepage.php">
<input type="text" name="name" placeholder="Search for People or things">
<input type="submit" name="search" value="search">
</form>
</div>
<div class="content">
<div class="sidebar">
<div id="visual">
<div id="image">
<img src="<?php echo $avatar ?>" width="200" height="250">
</div>
<div id="upload">
<form action="homepage.php" method="POST" enctype="multipart/form-data">
<p>Upload Pic:</p><input type="file" name="img"><br>
<div id="stupid">
<input type="submit" name="upload" value="Upload">
</div>
</form>
</div>
</div>
</div>
<div class="main">
<div id="mind">
<form method="GET" action="homepage.php">
<textarea name="mind" cols="40" rows="5"></textarea>
<input type="submit" name="post" value="Post">
</form>
</div>
<div class="feed">
<div class="posts">
<div class="poster">
<p><b>Poster</b></p>
</div>
<div class="post">
<p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I had read that every thing inside the <body> tags will fit inside of the body and the body will adjust according to the width of individual elements, but the website I designed the content seems to go outside the body, I know it because I gave body a border and found out that the content goes outside the body when I resize the browser. Why is it happening in the first place and what is the best way to make a website that is all screen friendly? also I tried to use vw instead of px is it a good idea?
One way is to turn the body into an inline-block.
Inline blocks have the same width as their contents by default and are not restricted to the width of the window.
body {
margin: 0px;
border: 1px solid black;
display: inline-block; /* new */
}
#head {
text-align: center;
background: linear-gradient(to right, cyan, purple);
margin: 0px;
padding: 20px;
border: 1px solid black;
}
#head h1 {
margin: 0px;
font-family: 'Great Vibes', cursive;
color: white;
font-size: 40px;
}
.contianer {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.ops {
display: flex;
justify-content: center;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#list ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#list li {
float: left;
padding: 0px;
margin: 0px;
}
#list li:hover {
background-color: lightgrey;
}
#list {
display: flex;
justify-content: center;
margin: 10px;
}
form {
padding: 0px;
margin: 0px;
}
.dhund {
display: flex;
justify-content: center;
padding: 10px;
}
input[name="name"] {
max-height: 37px;
max-width: 400px;
min-width: 200px;
border-radius: 10px;
font-size: 17px;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
input[name="search"] {
background-color: rgb(183, 242, 184);
font-size: 15px;
border: 1px solid black;
border-radius: 5px;
color: black;
}
input[name="logout"],
input[name="chat"],
input[name="update"],
input[name="homepage"],
input[name="event"] {
background-color: white;
border: none;
padding: 10px 19px;
}
input[name="logout"]:hover,
input[name="chat"]:hover,
input[name="update"]:hover,
input[name="homepage"]:hover,
input[name="event"]:hover {
background-color: lightgrey;
}
.content {
display: flex;
flex-direction: row;
}
.sidebar {
display: flex;
flex-direction: column;
border-right: 1px solid black;
height: 100%
}
#image {
margin: 2px;
padding: 5px;
display: flex;
justify-content: center;
}
#image img {
border: 1px solid black;
}
#upload {
border-top: 1px solid black;
margin: 2px;
min-width: 250px;
}
#upload p {
text-align: center;
}
#stupid {
display: flex;
justify-content: center;
margin: 5px;
}
.material {
margin: 20px;
min-width: 400px;
border: 1px solid black;
border-radius: 10px;
background-color: lightgrey;
}
.posts {
border: 1px solid black;
margin: 17px;
margin-top: 80px;
border-radius: 7px;
}
.feed {
padding: 20px;
}
.post p {
padding: 5px;
}
.poster {
padding-left: 10px;
border-bottom: 1px solid black;
}
.poster p {}
#matter p {
text-indent: 30px;
}
#matter {
border: 1px solid black;
margin: 8px;
background-color: white;
border-radius: 20px;
padding: 20px;
}
.main {
display: flex;
flex-direction: column;
margin: 5px;
width: 100%;
}
/*#mind
{
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid black;
border-radius: 8px;
background-color: lightgrey;
}*/
textarea[name="mind"] {
border-radius: 10px;
border: 1px solid black;
font-size: 15px;
padding: 10px 5px 10px 5px;
}
input[name="post"] {
width: 120px;
height: 50px;
background-color: powderblue;
font-size: 17px;
}
<!DOCTYPE html>
<html>
<head>
<title>The Joint.</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>
<body>
<div id="head">
<h1>The Joint.</h1>
</div>
<div class="contianer">
<div class="ops">
<div id="list">
<ul>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>
</li>
<li>
<form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>
</li>
</ul>
</div>
</div>
<div class="dhund">
<form method="POST" action="homepage.php">
<input type="text" name="name" placeholder="Search for People or things">
<input type="submit" name="search" value="search">
</form>
</div>
<div class="content">
<div class="sidebar">
<div id="visual">
<div id="image">
<img src="<?php echo $avatar ?>" width="200" height="250">
</div>
<div id="upload">
<form action="homepage.php" method="POST" enctype="multipart/form-data">
<p>Upload Pic:</p><input type="file" name="img"><br>
<div id="stupid">
<input type="submit" name="upload" value="Upload">
</div>
</form>
</div>
</div>
</div>
<div class="main">
<div id="mind">
<form method="GET" action="homepage.php">
<textarea name="mind" cols="40" rows="5"></textarea>
<input type="submit" name="post" value="Post">
</form>
</div>
<div class="feed">
<div class="posts">
<div class="poster">
<p><b>Poster</b></p>
</div>
<div class="post">
<p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This solution does make the body narrower than the window on wide screens, but you can solve that by adding a min-width.
Related
I have created a basic form, where the user has to input various contact details. My Send button however, does not work. Im trying to use HTML and CSS only for this form, but I'm not opposed to using JS if that's what is needed for this to be functional.
I have looked up various ways for a solution, but most things involve using php, which is not something I am able to use for this. As stated before, I'm really just trying to stick with HTML.
My button does have type="submit" and href="myemail#email.com" (I have my actual email in there). However, my button does not click, or at least it does not give the appearance of clicking nor does it send anything to my email. I also thought it was just a web browser issue, but I have tried both chrome and safari and no luck.
<section class="modal-section">
<button class="modal-button" id="open">Click Me</button>
<div class="modal-container" id="modal_container">
<div class="modal">
<div class="form-container" id="form-container">
<h1 class="form-header">Connect With Me.</h1>
<p>I would love to respond to your queries and help you succeed. Feel free to contact me!</p>
<div class="contact-box">
<div class="contact-left">
<h3 class="form-header3">Send your request</h3>
<form>
<div class="input-row">
<div class="input-group">
<label>Name</label>
<input type="text" placeholder="Your Name" required>
</div>
<div class="input-group">
<label>Phone</label>
<input type="text" placeholder="(888) 888-8888">
</div>
</div>
<div class="input-row">
<div class="input-group">
<label>Email</label>
<input type="email" placeholder="YourEmail#Email.com" required>
</div>
<div class="input-group">
<label>Subject</label>
<input type="text" placeholder="You're Hired!" required>
</div>
</div>
<label>Message</label>
<textarea rows="5" placeholder="You are so cool, please make my website cool too!" required></textarea>
<button class="form-button" type="submit" value="Send" href="mailto:johnsonisaiah13#yahoo.com">SEND</button>
</form>
</div>
<div class="contact-right">
<h3 class="form-header3">Reach Me</h3>
<table>
<tr>
<td>Email</td>
<td>Johnsonisaiah13#yahoo.com</td>
</tr>
<tr>
<td>Location</td>
<td>Fort Stockton, TX</td>
</tr>
</table>
</div>
</div>
</div>
<button class="modal-button" id="close">Close Me</button>
</div>
</div>
</section>
/* //////////////////////////////////////////////////////////////
//////////////// MODAL SECTION ///////////////////////
////////////////////////////////////////////////////////////// */
.modal-section {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 200vh; /* make 100 for smaller screen */
opacity: 0;
pointer-events: none;
}
.modal-button {
/* background-color: #39FF14;
color: #1F2022;
border-radius: 5px;
padding: 10px 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-size: 14px; */
background-color: white;
padding: 10px 18px;
font-weight: bold;
color: #1F2022;
display: inline-block;
margin: 30px 0;
border-radius: 5px;
}
.modal-button:hover {
background-color: #39FF14;
}
.modal {
background-color: white;
padding: 30px 50px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
width: 1000px;
max-width: 100%;
text-align: center;
}
.modal-header {
margin: 0;
}
.modal-text {
font-size: 14px;
opacity: 0.7;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
/* <!-- /////////////////////////////////////////////////////////////
///////////////////// CONTACT ME / HIRE ME /////////////////////////
///////////////////////////////////////////////////////////// --> */
.form-container {
width: 80%;
margin: 50px auto;
}
.contact-box {
background: white;
display: flex;
}
.contact-left {
flex-basis: 60%;
padding: 40px 60px;
}
.contact-right {
flex-basis: 40%;
padding: 40px;
background: #39FF14;
}
.form-header {
margin-bottom: 10px;
color: white;
}
.form-container p {
margin-bottom: 40px;
color: white;
}
.input-row {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.input-row .input-group {
flex-basis: 45%;
}
input {
width: 100%;
border: none;
border-bottom: 1px solid #39FF14;
outline: none;
padding-bottom: 5px;
}
textarea {
width: 100%;
border: 1px solid #39FF14;
outline: none;
padding: 10px;
box-sizing: border-box;
}
label {
margin-bottom: 6px;
display: block;
color: black;
}
.form-button {
background-color: #39FF14;
width: 100px;
border: none;
outline: none;
color: black;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(0, 14.5, 38.9, 48.6);
pointer-events: auto;
}
.form-header3 {
/* color: orange; */
font-weight: 600;
margin-bottom: 30px;
}
tr td:first-child {
padding-right: 20px;
}
tr td {
padding-top: 20px;
}
You can try refering to this old question some time ago. Not sure if it still works, but hope it helps.
html button to send email
How can I put label "bright" above the range slide, now it's above but not directly above slider. I tried to use label but it didnt't work............................................................................
.popup-btn {
display: flex;
justify-content: left;
}
.panel {
text-align: center;
width: 335px;
height: 150px;
padding: 7px;
margin: 5px;
border: 6px solid gray;
float: left;
border-radius: 5px;
background-color: rgb(53, 96, 99);
opacity: 0.9;
font-size: 24px;
}
button {
background-color: rgb(241, 232, 232);
/* Green */
border: 3px solid gray;
color: white;
width: 85px;
height: 45px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 22px;
border-radius: 5px;
color: black;
font-family: 'Gemunu Libre', sans-serif;
margin-top: 15px;
margin-right: 5px;
}
<div id="panel-led" class="panel">
<img src="swiatlo.jpg" class="obrazki"> LED: <span id="wartosc-led">[stanled]</span>
<br/>
<button id="przycisk-led" style="margin-left: -8%;"></button>
<button id="przycisk-led1"></button>
</br>
<div class="popup-btn">
<button style="margin-left: auto;margin-right: auto;width: 50%;" onclick="show_schedule()">Schedule</button>
<span style="font-size: 12px;">bright</span>
<input style="width: 20%;" type="range" id="rangeinput" min="0" max="255" value="122" onchange="rangevalue.value=value" />
</div>
</div>
You can use flex in CSS:
Wrap a div around the label and the range slider.
Set the display property value of div to flex.
Set flex-direction property to column
For label you should define a name attribute of range slider and use that name in the label as <label for="some-name">Text</label>
Hope it helps.
.popup-btn {
display: flex;
justify-content: left;
}
.panel {
text-align: center;
width: 335px;
height: 150px;
padding: 7px;
margin: 5px;
border: 6px solid gray;
float: left;
border-radius: 5px;
background-color: rgb(53, 96, 99);
opacity: 0.9;
font-size: 24px;
}
button {
background-color: rgb(241, 232, 232);
/* Green */
border: 3px solid gray;
color: white;
width: 85px;
height: 45px;
/*text-align: center;*/
text-decoration: none;
display: inline-block;
font-size: 22px;
border-radius: 5px;
color: black;
font-family: 'Gemunu Libre', sans-serif;
margin-top: 15px;
margin-right: 5px;
}
#przycisk-led {
margin-left: -8%;
}
#schedule-button {
margin-left: auto;
margin-right: auto;
width: 50%;
}
#brightness-label {
font-size: 12px;
color: white;
}
.range-slider-input {
display: flex;
flex-direction: column;
text-align: left;
border: 1px solid white;
padding: 2%;
}
<div id="panel-led" class="panel">
<img src="swiatlo.jpg" class="obrazki" alt="swiatlo.jpg" /> LED: <span id="wartosc-led">[stanled]</span>
<br>
<button id="przycisk-led"></button>
<button id="przycisk-led1"></button>
<div class="popup-btn">
<button id="schedule-button" onclick="show_schedule()">Schedule</button>
<div class="range-slider-input">
<label for="brightness" id="brightness-label">Brightness</label>
<input type="range" id="rangeinput" min="0" max="255" value="122" name="brightness" onchange="rangevalue.value=value" />
</div>
</div>
</div>
I got rid of all the irrelevant code, and here's what I did:
Wrap both label and slider with div and give it style of flex column.
align-items:center is what centering both of them on the main axis.
width:max-content to make it not take the entire row's width.
Now you can put it anywhere you want :)
.special {
display: flex;
flex-direction: column;
align-items: center;
width: max-content;
}
<div class="special">
<span style="font-size: 12px;">bright</span>
<input type="range" id="rangeinput" min="0" max="255" value="122" />
</div>
Current Layout
-------------------
- Banner Row:Group
- Column 1: Label Column 2: Input or Select Column 3: Button or Link
- EndGroup
- Banner Row:Group
- Column 1: Label Column 2: Input or Select Column 3: Button or Link
- EndGroup
- Banner Row:Group
- Column 1: Label Column 2: Input or Select Column 3: Button or Link
- EndGroup
I would like Col1 (label) to be right justified, equal fixed widths
I would like Col2 (input or select) to be same size, fixed width
I would like Col3 (Button or Link) to be left justified
I would like decreasing window width to wrap col component onto next line like at the same time for each column
body {
display: flex;
align-items: center;
justify-content: center;
}
#box {
flex-direction: column;
justify-content: center;
background-color: wheat;
display: flex;
border: 2px solid black;
border-radius: 15px;
border-color: black;
padding: 20px 40px;
margin: 10px 50px;
box-shadow: 5px 10px 18px #888888;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-color: #0099cc;
border-radius: 500px;
padding: 10px 50px 0 50px;
margin: 0 auto 10px auto;
}
#banner-text {
font-size: 14px;
text-align: center;
color: white;
margin-bottom: 15px;
}
.right {
font-size: 10px;
text-align: right;
}
#box input[type="tel"], input[type="email"], select {
font-size: 100%;
margin: 0 10px;
width: 200px;
}
a:link {
font-size: 12px;
font-weight: bold;
text-decoration: none;
align-self: center;
}
a:hover {
text-decoration: underline;
color: blue;
}
.button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
width: 150px;
border: 2px solid #0099cc;
background-color: #0099cc;
color: #ffffff;
border-radius: 15px;
text-decoration: none;
outline: none;
}
.button:hover {
border: 2px solid white;
color: #ffffff;
padding: 5px 10px;
}
.button:disabled {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
textarea {
font-size: 18px;
height: 250px;
width: 100%;
}
label {
font-weight: bold;
}
.group {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
<div id="box">
<div id="banner">
<img
src="https://www.google.com/logos/doodles/2020/thank-you-public-health-workers-and-to-researchers-in-the-scientific-community-6753651837108753-law.gif"
alt="Banner"
width="300"
height="92"
/>
<h3>Header Text</h3>
</div>
<div>
<label for="input">Provider:</label>
<select id="selected">
<option value="opt1">Option #1</option>
</select>
https://www.google.com
</div>
<div>
<label for="input">Patient Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="user#domain.com"
/>
<input type="button" class="button" value="Send Email" />
</div>
<div>
<label for="input">Patient Mobile Phone:</label>
<input
type="tel"
id="sms"
name="sms"
placeholder="(123) 456-7890"
/>
<input type="button" class="button" value="Send SMS Text" />
</div>
</div>
JSFiddle
Here's a possibility for you. Based on what you were saying you wanted, it seemed to me that css grid was the better option.
So, I added css grid with grid-template-columns: max-content max-content 1fr; as the columns and it'll add new rows as you create them.
I made the wrapping divs (.grid>div) use display: contents although it isn't fully supported on all major browsers yet, the way to get around using that would be to just remove the wrapping divs as grid will take care of the rest anyway.
body {
display: flex;
align-items: center;
justify-content: center;
}
#box {
flex-direction: column;
justify-content: center;
background-color: wheat;
display: flex;
border: 2px solid black;
border-radius: 15px;
border-color: black;
padding: 20px 40px;
margin: 10px 50px;
box-shadow: 5px 10px 18px #888888;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-color: #0099cc;
border-radius: 500px;
padding: 10px 50px 0 50px;
margin: 0 auto 10px auto;
}
#banner-text {
font-size: 14px;
text-align: center;
color: white;
margin-bottom: 15px;
}
.right {
font-size: 10px;
text-align: right;
}
#box input[type="tel"],
input[type="email"],
select {
font-size: 100%;
margin: 0 10px;
/*width: 200px;*/
}
a:link {
font-size: 12px;
font-weight: bold;
text-decoration: none;
align-self: center;
}
a:hover {
text-decoration: underline;
color: blue;
}
.button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
width: 150px;
border: 2px solid #0099cc;
background-color: #0099cc;
color: #ffffff;
border-radius: 15px;
text-decoration: none;
outline: none;
}
.button:hover {
border: 2px solid white;
color: #ffffff;
padding: 5px 10px;
}
.button:disabled {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
textarea {
font-size: 18px;
height: 250px;
width: 100%;
}
label {
font-weight: bold;
}
.group {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.grid {
display: grid;
grid-template-columns: max-content max-content 1fr;
}
.grid>div {
display: contents;
}
.grid>div>:first-child {
justify-self: flex-end;
}
#media only screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
.grid>div>:first-child {
justify-self: flex-start;
}
}
<div id="box">
<div id="banner">
<img src="https://www.google.com/logos/doodles/2020/thank-you-public-health-workers-and-to-researchers-in-the-scientific-community-6753651837108753-law.gif" alt="Banner" width="300" height="92" />
<h3>Header Text</h3>
</div>
<div class="grid">
<div>
<label for="input">Provider:</label>
<select id="selected">
<option value="opt1">Option #1</option>
</select>
https://www.google.com
</div>
<div>
<label for="input">Patient Email:</label>
<input type="email" id="email" name="email" placeholder="user#domain.com" />
<input type="button" class="button" value="Send Email" />
</div>
<div>
<label for="input">Patient Mobile Phone:</label>
<input type="tel" id="sms" name="sms" placeholder="(123) 456-7890" />
<input type="button" class="button" value="Send SMS Text" />
</div>
</div>
</div>
When I resize my browser window the input field is cut off a bit. I am using percentages but it still is being cut off and I do not know why. I have provided a screenshot below. If I am using percentages shouldn't it resize automatically? Thank you!
Here is my css code:
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.bar-manager {
width: 100%;
}
.top-bar {
display: flex;
align-items: center;
width: 100%;
height: 7%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.top-bar p {
margin-left: 10px;
font-weight: lighter;
}
.user-search-input-field {
margin-left: 70%;
width: 190px;
background-color: red;
}
.bottom-bar {
width: 100%;
height: 40px;
display: flex;
align-content: center;
line-height: 40%;
background-color: white;
border-bottom: 1px solid lightgrey;
}
.bottom-bar h1 {
font-size: 12px;
margin-left: 10px;
font-weight: 500;
}
.bottom-bar p {
font-size: 12px;
margin-left: 10px;
font-weight: lighter;
}
Here is my HTML code:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="homepage-window">
<div class="nav-bar">
</div>
<div class="bar-manager">
<div class="top-bar">
<p>Homepage</p>
<div class="user-search-input-field">
<form action="Login.php" method="POST">
<input type="text" name="userPost" placeholder="Search users..." required>
<i class = "fa fa-search" aria-hidden = "true"></i>
</form>
</div>
</div>
<div class="bottom-bar">
<div class="bottom-bar-texts">
<div><h1>Welcome, Omard2000</h1></div>
<div><p>Administrator</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you!
You've positioned the element.
It's possible that the left is pushing it off the visible screen
Also, mixing view units and pixels is dangerous.
Updated Post:
becouse of this user-search-input-field not enough space. top-bar divide into two parts,part1 for p and part2 for user-search-input-field with more space. like this:
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.homepage-window {
height: 100vh;
display: flex;
}
.nav-bar {
width: 18%;
background-color: #2E3E4E;
}
.bar-manager {
width: 100%;
}
.top-bar {
display: flex;
align-items: center;
width: 100%;
height: 7%;
background-color: white;
border-bottom: 0.5px solid lightgrey;
}
.top-bar p {
margin-left: 10px;
font-weight: lighter;
}
.bottom-bar {
width: 100%;
height: 40px;
display: flex;
align-content: center;
line-height: 40%;
background-color: white;
border-bottom: 1px solid lightgrey;
}
.bottom-bar h1 {
font-size: 12px;
margin-left: 10px;
font-weight: 500;
}
.bottom-bar p {
font-size: 12px;
margin-left: 10px;
font-weight: lighter;
}
.user-search-input-field {
width: 100%;
}
form {
background-color: red;
display: inline-block;
float: right;
}
.top-bar p {
width: 20%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="homepage-window">
<div class="nav-bar"></div>
<div class="bar-manager">
<div class="top-bar">
<p>Homepage</p>
<div class="user-search-input-field">
<form action="Login.php" method="POST">
<input type="text" name="userPost" placeholder="Search users..." required>
<i class = "fa fa-search" aria-hidden = "true"></i>
</form>
</div>
</div>
<div class="bottom-bar">
<div class="bottom-bar-texts">
<div><h1>Welcome, Omard2000</h1></div>
<div><p>Administrator</p></div>
</div>
</div>
</div>
</div>
I have created a input field and a button but i want to put that button insiade that input field. I have done it by using position:absolute but the problem is its not working properly in medium or large screen. Any kind of help would be highly appreciated. Here is my code
HTML CODE
<div>
<div style="float: left;width: 82%">
<input type="text" class="sent-message-text">
<img src="../img/camera.png" class="post-image-uploaad">
</div>
<div style="float: right">
<button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad" style="margin-right: 15px;"></button>
</div>
</div>
</div>
CSS CODE
.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
margin:-20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border: 1px solid #1486ab66 !important;
border-radius: 4px;
width: 92%;
}
.post-image-uploaad {
width: auto;
height: 22px;
margin-top: 8px;
}
.no-button-design {
padding: 0px;
border: 0px;
background-color: transparent;
margin: 0px;
}
.no-button-design img {
height: 34px;
}
In small screen its perfectly fine
But in large screen it's coming out from the input field
use this code
css:-
.fixed-bottom2 {
box-shadow: inset 0px 4px 5px #ededed;
padding: 9px;
margin: -20px !important
}
.sent-message-text {
border: 1px solid;
margin: 10px 0px 10px 15px;
min-height: 36px;
border-radius: 4px;
width: 100%;
position: relative;
}
.post-image-uploaad {
position: relative;
width: auto;
height: 22px;
margin: -39px -3px 1px 1px;
float: right;
}
.no-button-design {
padding: 0px;
border: 0px;
background-color: transparent;
margin: 19px 35px;
}
.no-button-design img {
height: 34px;
}
html:-
<div>
<div style="float: left;width: 82%">
<input type="text" class="sent-message-text">
<img src="../img/camera.png" class="post-image-uploaad">
</div>
<div>
<button class="no-button-design"><img src="../img/msg-sent.png" class="post-image-uploaad_send" style="margin-right: 15px;"></button>
</div>
</div>
</div>
form {
display: inline-block;
position: relative;
}
form button {
position: absolute;
top: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input name="search" type="text">
<button type="submit">click</button>
</form>
</body>
</html>
try this good luck
Update in 2022:for this question can try this code:
.search {
margin-bottom: 30px;
}
form {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
input {
position: relative;
width: 280px;
height: 30px;
}
button {
position: absolute;
margin-right: 3px;
padding: 8px 10px;
background-color: #e7c130;
border: none;
}
<div className='search'>
<form>
<input type='text' />
<button>SEARCH</button>
</form>
</div>
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<input type="text"/><button class="btn">button</button>
</body>
</html>