I am trying to create an html form that will change to column layout when the screen width reaches x amount of pixels (with flexbox and media query). The problem I am incurring is that the submit button will not position itself under the different fields such as name, town you were born, email in full screen but will in the phone sized screen.
I have tried to put the form-button div both inside and out of the contact div. Only when I leave it in the contact div I cannot get the button to display below the message box in mobile format. Then when I take it out the contact div it works for mobile but not full screen.
The first two pictures I include below are what I would like both full screen and mobile to look like (please exclude the responsiveness of the other elements it's a work in progress). The final two pictures are my current state.
Lastly I include both the HTML and CSS code for the form. I have also included the main CSS stylesheet incase there is something in there that may be affecting my form. The code for the button/button div may look bare, I have tried many different flexbox properties although none worked so I have removed them to avoid unnecessary clutter.
Full Screen Correct Small Screen Correct Full Screen Incorrect Small Screen Incorrect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="formStyle.css" />
<title>Contact Us</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Merchandise</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<h1>CONTACT US</h1>
<br /><br />
<h4>
Have a quick question? Use contact form below and we'll be back to you as
soon as possible!
</h4>
<br />
<form action="#" class="contactForm">
<div class="message">
<label for="msg">Message</label>
<textarea id="msg"></textarea>
</div>
<div class="contact">
<label for="name">Name</label>
<input type="text" id="name" />
<label for="townborn">Town you were born in</label>
<input type="text" id="townborn" />
<label for="email">Email Address</label>
<input type="email" id="email" />
</div>
<div class="form-button">
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
.contactForm {
display: flex;
background-color: beige;
border-radius: 3px;
padding: 1.8em;
}
.message {
display: flex;
flex-direction: column;
order: 3;
}
.message > textarea {
flex: 1;
min-width: 18em;
}
.contact {
flex: 1;
order: 1;
margin-right: 2em;
}
.contact input {
width: 100%;
}
.contact input {
padding: 1em;
margin-bottom: 1em;
}
#media only screen and (max-device-width: 480px) {
.contactForm {
flex-direction: column;
}
.message {
margin-right: 2em;
order: 2;
}
.form-button {
order: 3;
}
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 5%;
background-color: #ddf2eb;
align-items: center;
align-self: stretch;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}
I'm not sure that possible with flex, because flex is either row or column, and you want both at the same time.
you could try with grid instead!
Example with grid
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.contactForm label {
display: block;
}
.contactForm input,
.contactForm textarea {
height: 100%;
width: 100%;
}
.contactForm > div {
width: 100%;
}
.contact-name {
grid-area: name;
}
.contact-townborn {
grid-area: townborn;
}
.contact-email {
grid-area: email;
}
.contact-msg {
grid-area: msg;
padding-bottom: 20px;
}
.contact-form-button {
grid-area: button;
margin-top: -20px;
padding-top: 10px;
}
.contactForm {
background-color: #2196F3;
display: grid;
grid-gap: 20px;
grid-template-areas: 'name' 'townborn' 'email' 'msg' 'button';
padding: 20px;
max-width: 800px;
}
#media (min-width: 480px) {
.contactForm {
grid-template-areas: 'name msg' 'townborn msg' 'email msg' 'button msg';
}
.contact-form-button {
margin-top: 0;
}
}
<form action="#" class="contactForm">
<div class="contact-name">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<div class="contact-townborn">
<label for="townborn">Town you were born in</label>
<input type="text" id="townborn" />
</div>
<div class="contact-email">
<label for="email">Email Address</label>
<input type="email" id="email" />
</div>
<div class="contact-msg">
<label for="msg">Message</label>
<textarea id="msg"></textarea>
</div>
<div class="contact-form-button">
<button type="submit">Submit</button>
</div>
</form>
Source: W3schools CSS Grid Layout
Related
We are only concerned with the following snippet:
<nav>
<ul>
<li><a accesskey="s" href="#student-info">INFO</a></li>
<li><a accesskey="h" href="#html-questions">HTML</a></li>
<li><a accesskey="c" href="#css-questions">CSS</a></li>
</ul>
</nav>
I added the access keys/ shortcuts s, h, and, c to the three list items in our navigation bar. However, when I press s, h, or c, nothing happens. Isn't something supposed to happen? To elaborate, in the output, if I click on any of INFO, HTML, and CSS in the navigation bar, I will go straight to that section. Similarly, shouldn't the same thing happen if I press 's' instead of clicking on INFO in the navigation bar?
Disclaimer: Just ignore the CSS file. We are only concerned with the accesskey attribute in the anchor elements nested in the nav element.
These are my html and css files:
#media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
.info {
padding: 10px 0 0 5px;
}
.formrow {
margin-top: 30px;
padding: 0px 15px;
}
input {
font-size: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::before {
content: "Question #";
}
.question {
border: none;
padding-bottom: 0;
}
.answers-list {
list-style: none;
padding: 0;
}
button {
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
footer,
footer a {
color: #dfdfe2;
}
address {
text-align: center;
padding: 0.3em;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a accesskey="s" href="#student-info">INFO</a></li>
<li><a accesskey="h" href="#html-questions">HTML</a></li>
<li><a accesskey="c" href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
freeCodeCamp<br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
It does work, but it depends on the browser which combination is necessary to activate the access key.
Single characters keys are not a good idea, since they conflict with controls for the browser and screen readers. Hence, browsers typically require a key combination:
On Windows, it’s most likely Alt+Shift+key
And on Mac Control + Option + key
In general, there are some accessibility caveats with the accesskey attribute. See Accesskey on WebAIM
Due to numerous problems with implementation, accesskey is typically best avoided.
For some discussion on how to communicate the access keys to sighted users, see How to highlight accesskeys in a WCAG valid way?
I used margin on other elements successfully, yet when I try to do this with #searchbarcontainer it moves the entire page down. I'm trying to center it slightly below the middle of the page, but I can't work my way around this problem. I am trying to make somewhat of a Google clone and I'm new to HTML and CSS. Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
#nav {
display: flex;
justify-content: flex-end;
margin-top: -40px;
margin-right: -5px;
padding: 20px;
}
.child {
padding: 15px;
}
.link {
color: rgb(95, 91, 91);
text-decoration: none;
}
.link:hover {
color: black;
}
#logo {
margin-top: 110px;
text-align: center;
}
#searchbarcontainer {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="form">
<form action="https://google.com/search">
<div id="searchbarcontainer">
<input id="searchbar" type="text" name="q">
</div>
<div id="submitcontainer">
<input id="submit" type="submit" value="Google Search">
</div>
</form>
</div>
<div id="nav">
<div class="child">
<button type="button" class="btn btn-light"><a class="link" href="images.html">Image Search</a></button>
</div>
<div class="child">
<button type="button" class="btn btn-light"><a class="link" href="advanced.html">Advanced Search</a></button>
</div>
</div>
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
Your layout doesnt allow for the search bar container to be moved without affecting the entire page. You say that you want it to be lower, but as you can see in the picture, it has no where to go except to move everything down.
If you wanted to move it down you have to change it so that the search input and the "google search" button will be in the same container and center it that way
when writing html, you have to write what you want to see in vertical order in your website
you've written from bottom to top instead
you've also made a lot of unnecessary elements
here's a somewhat streamlined version
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "sans-serif";
}
input {
outline: 0;
border: 0.3vh solid #bbb;
font-size: 1.6vh;
}
nav {
width: 100%;
height: 6.7vh;
border-bottom: 0.2vh solid #bbb;
display: flex;
justify-content: flex-end;
padding: 0 3vh;
}
nav>div {
height: 6.7vh;
background: #000;
display: flex;
align-items: center;
justify-content: space-around;
}
nav>div>a {
color: black;
text-decoration: none;
font-size: 1.6vh;
background: yellow;
}
nav>div>a:first-child {
margin-right: 1vh;
}
section {
height: 93.3vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section>img {
width: 45vw;
height: 15vh;
object-fit: contain;
}
section>form {
width: 45vw;
display: flex;
justify-content: space-around;
margin-top: 3vh;
}
section>form>input[type="text"] {
padding: 1vh;
border-radius: 1vh;
width: 65%;
}
section>form>input[type="submit"] {
width: 25%;
border-radius: 1vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<nav>
<div>Image SearchAdvanced Search</div>
</nav>
<section>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<form action="https://google.com/search">
<input id="searchbar" type="text" name="q" />
<input id="submit" type="submit" value="Search" />
</form>
</section>
</main>
</body>
</html>
I just created a contact Us form in HTML and CSS. I want a responsive page. In desktop everything works fine but When I try in mobile or tablet both contactForm and contactInfo shifts itself automatically into top and bottom position. I want to put them side by side in also mobile devices. I don't know why this is happening?
there are two parts in container:
contactForm
ContactInfo
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
.contact {
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: lightgreen;
}
.contact .content {
max-width: 800px;
text-align: center;
}
.contact .content h2 {
font-size: 36px;
font-weight: 500;
color: blue;
}
.contact .content p {
font-weight: 300;
color: blue;
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.container .contactInfo {
width: 50%;
display: flex;
flex-direction: column;
}
.container .contactInfo .box {
position: relative;
padding: 20px 0;
display: flex;
}
.container .contactInfo .box .text {
display: flex;
margin-left: 20px;
font-size: 16px;
color: green;
flex-direction: column;
font-weight: 300;
}
.container .contactInfo .box .text h3 {
font-weight: 500;
color: red;
}
.contactForm {
padding: 40px;
background: #fff;
}
.contactForm h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactForm .inputBox {
position: relative;
width: 100%;
margin-top: 10px;
}
.contactForm .inputBox input,
.contactForm .inputBox textarea {
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid black;
outline: none;
resize: none;
}
.contactForm .inputBox input[type="submit"] {
width: 100px;
background: #000;
color: orange;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
#media (max-width: 991px) {
.contact {
padding: 50px;
}
.container {
flex-direction: column;
}
.container .contactInfo {
margin-bottom: 40px;
}
.container .contactInfo {
width: 100%;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section class="contact">
<div class="content">
<h2>Reach Us</h2>
<p>
We would love to respond to your queries and help you succeed.<br />Feel
free to get in touch with us
</p>
</div>
<div class="container">
<!-- contact form -->
<div class="contactForm">
<form action="contact.php">
<h2>Send Query</h2>
<div class="inputBox">
<input type="text" name="" required="required" />
<span>Full Name</span>
</div>
<div class="inputBox">
<input type="email" name="" required="required" />
<span>Email Id</span>
</div>
<div class="inputBox">
<input type="number" name="" required="required" />
<span>Phone</span>
</div>
<div class="inputBox">
<input type="text" name="" required="required" />
<span>Address</span>
</div>
<div class="inputBox">
<textarea name="" id="" required="required"></textarea>
<span>Type your Query</span>
</div>
<div class="inputBox">
<input type="submit" name="" required="required" value="Send" />
</div>
</form>
</div>
<!-- reach us -->
<div class="contactInfo">
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Address</h3>
<p>AaBbbbbbbb,<br />fdafafdfa,<br />fdafafgafa</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Phone</h3>
<p>+91 91XXXXXXXXXX</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Email</h3>
<p>asdfghjkl.gmail.com</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
If you want .contactform and .contactinfo container side by side. You can do it in two simple ways
Instead of flex-direction: column, You can use flex-direction: row.
No need to write unnecessary CSS. Just remove the flex-direction property from the media query.
#media (max-width: 991px) {
.contact {
padding: 50px;
}
/* .container {
flex-direction: column;
} */
.container .contactInfo {
margin-bottom: 40px;
}
.container .contactInfo {
width: 100%;
}
}
I would like to know where to place the tags correctly and if my code is missing something maybe. When I place the form tags in my code, everything moves as you guys can see in the code snippet.
I would like it to be as shown in the picture below.
This may seem like a very basic question but, to be honest, I don't understand why this happens.
This is what my page looks like without the tags:
Any guidance will be highly appreciated, thanks beforehand.
#main-container{
width: 100%;
height: 100vh;
background-color: rgb(236, 236, 236);
display: flex;
flex-direction: column;
}
/* --------------------- add bar container ----------------- */
#add-bar-container{
width: 100%;
height: 4%;
background-color: white;
display: flex;
align-items: center;
justify-content: flex-end;
border-bottom: 1px solid lightgray;
}
#profile-picture{
height: 30px;
width: 35px;
}
#search-button{
width: 60px;
height: 30px;
margin-right: 10px;
background-color: lightgray;
border: none;
cursor: pointer;
border-radius: 5px;
}
#search-bar{
height: 30px;
width: 200px;
border: none;
}
#user-info-bar{
width: 100%;
height: 3%;
border-bottom: 1px solid lightgray;
}
#panels-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
#left-panel{
width: 20%;
height: 100%;
display: flex;
}
#center-panel{
background-color: white;
display: flex;
flex-direction: column;
flex-grow: 3;
}
#right-panel{
width: 20%;
height: 100%;
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/styles.css">
<title>Stripe - Agent</title>
</head>
<body>
<div id="main-container">
<form action="" id="search-form">
<div id="add-bar-container">
<input id="search-bar" type="text" placeholder="Search..." name="q">
<button id="search-button" type="submit" value="Search"><i class="fa fa-search"></i></button>
<img src="../icons/profile_img.png" alt="Avatar" id="profile-picture">
</div>
</form>
<div id="user-info-bar">
</div>
<div id="panels-container">
<div id="left-panel">
</div>
<div id="center-panel">
</div>
<div id="right-panel">
</div>
</div>
</div>
</body>
</html>
<div id="add-bar-container">
<form action="" id="search-form">
<input id="search-bar" type="text" placeholder="Search..." name="q">
<button id="search-button" type="submit" value="Search"><i class="fa fa-search"></i></button>
<img src="../icons/profile_img.png" alt="Avatar" id="profile-picture">
</form>
</div
the form should be inside the div
First, if you want to state that a document is written in English, then it is enough to use <html lang="en">, so lose the nonsense <meta lang="en">.
Second, about the style, you need to have a MEDIA attribute on your LINK loading CSS files so you aren't sending screen-specific information to all targets! Add media attribute, surly that style is not for any UA, you can read this article about it. Also, you better have a logical directory structure, so you don't have to "up-tree" link, just "down-tree", in other words, structure your page the same way it’s called by the browser!
For example, the three directory pathing methods:
up-tree: …/styles/styles.css – /FAIL/
rooted: /styles/styles.css – /FAIL/
down-tree: styles/styles.css – /WIN/
Third, stop polluting your markup with class and id while you don't need them. If you have just one form, you can just select that by form {} in your CSS, or for button inside form, button {}/form button {} is enough.
Fourth, don't use <div> inside <form>, use <feildset>, It also groups multiple form elements into related sections, read more on this and about how to make forms and this page from MDN about fieldset. Also, use <label>, placeholder is not a label!
So, May I suggest this markup and style as a refactor:
header {
height: 6em;
background-color: rgb(236, 236, 236);
display: flex;
flex-direction:column;
}
header div {
flex-basis:50%;
border-bottom: 1px solid lightgray;
display:flex;
background-color:#fff;
align-items: center;
justify-content: flex-end;
border-bottom: 1px solid lightgray;
}
header div img {
height: 30px;
width: 35px;
}
header div form {
display:flex;
}
header div form fieldset {
border:none;
}
header div form input {
width: 12em;
border: none;
}
header div form button{
width: 3.5em;
height: 2em;
margin-right: 10px;
background-color: lightgray;
border: none;
cursor: pointer;
border-radius: 5px;
}
header #userInfoBar {
background-color:#ececec;
}
main {
width: 100%;
height: 100%;
display: flex;
background-color: rgb(236, 236, 236);
}
#left-panel{
flex-basis:20%;
height: 100%;
display: flex;
}
#center-panel{
background-color: white;
display: flex;
flex-direction: column;
flex-grow: 3;
}
#right-panel{
flex-basis:20%;
height: 100%;
display: flex;
}
and
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/styles.css">
<title>Stripe - Agent</title>
</head><body>
<header>
<div>
<form action="action.php">
<fieldset>
<label>
Search:
<input
type="text"
placeholder="What are you looking for?"
name="searchBar"
required>
</label>
</fieldset>
<button value="Search"><i class="fa fa-search"></i></button>
</form>
<img src="../icons/profile_img.png" alt="Avatar">
</div>
<div id="userInfoBar">
</div>
</header>
<main>
<div id="left-panel">
</div>
<div id="center-panel">
</div>
<div id="right-panel">
</div>
</main>
</body>
</html>
I'm very new to ASP.NET, and I'm currently using ASP.NET Core 2.0, so my issue could come from this, just letting you know.
So, what I'm trying to do is quite simple, display a row including 2 col-md-6, and another row under this one including a col-md-12.
This works perfectly on "normal" laptop screen, but when I reduce screen size to test responsiveness, the second row displays behind the first one, and in its center.
Laptop screen:
Small screen:
CSS here :
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Custom changes */
body {background-color:grey;}
.form {
background-color: green;
height: 66vh;
}
.form form {
height: 100%;
}
#inputs {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
}
.col-md-6 {
padding-top: 2%;
padding-bottom: 3%;
text-align: center;
background-color:orange;
height: 100%;
}
.textbox {
width: 66%;
height: 90%;
background-color: red;
resize: none;
}
#submit {
text-align: center;
background-color: pink;
height: 48px;
padding: 0;
margin: 0;
}
.errors {
background-color: aqua;
}
And HTML:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
#{
string message = "";
string phones = "";
int error_nb = 0;
int error_line = 0;
if (Request.Method == "POST")
{
message = Request.Form["message"];
phones = Request.Form["phones"];
}
}
<div class="form">
<form method="post">
<div class="row" id="inputs">
<div class="col-md-6">
Message:<br />
<textarea type="text" name="message" class="textbox">#message</textarea>
</div>
<div class="col-md-6">
Phones:<br />
<textarea type="text" name="phones" class="textbox">#phones</textarea>
</div>
</div>
<div class="row" id="submit">
<div class="col-md-12">
<input type="submit" name="submit" class="btn btn-lg btn-success" />
</div>
</div>
</form>
</div>
<div class="errors">
<textarea>#error_nb error(s) detected at line #error_line !</textarea>
</div>
Any idea to solve this ?
Thanks !
EDIT: Here is the _Layout.cshtml file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebApplication6</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
The problem is that at lower screen resolution, you have no set column... You should always define at least a col-xs-* here, I added col-xs-12 and it works.
CSS here: body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Custom changes */
body {
background-color: grey;
}
.form {
background-color: green;
height: 66vh;
}
.form form {
height: 100%;
}
#inputs {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
}
.col-md-6 {
padding-top: 2%;
padding-bottom: 3%;
text-align: center;
background-color: orange;
height: 100%;
}
.textbox {
width: 66%;
height: 90%;
background-color: red;
resize: none;
}
#submit {
text-align: center;
background-color: pink;
height: 48px;
padding: 0;
margin: 0;
}
.errors {
background-color: aqua;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form container">
<form method="post">
<div class="row" id="inputs">
<div class="col-md-6 col-xs-12">
Message:<br />
<textarea type="text" name="message" class="textbox">#message</textarea>
</div>
<div class="col-md-6 col-xs-12">
Phones:<br />
<textarea type="text" name="phones" class="textbox">#phones</textarea>
</div>
</div>
<div class="row" id="submit">
<div class="col-xs-12">
<input type="submit" name="submit" class="btn btn-lg btn-success" />
</div>
</div>
</form>
</div>
<div class="errors">
<textarea>#error_nb error(s) detected at line #error_line !</textarea>
</div>
Unfortunately, this is not documented correctly in the docs, but having columns without a XS value will have unpredictable results. Note that in your case, the CSS rule float:left was missing, since only col-xs-* apply it.
It's working perfectly when am using row-fluid in you grid, its suggested to use row-fluid for better responsive cases.
Ref link.
and for the responsive issues, I have added this code for you -
#media only screen and (max-width: 767px) {
#inputs {
height: auto;
width: auto;
margin: 0;
padding: 0;
}
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Custom changes */
body {
background-color: grey;
}
.form {
background-color: green;
height: 66vh;
}
.form form {
height: 100%;
}
#inputs {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
}
.col-md-6 {
padding-top: 2%;
padding-bottom: 3%;
text-align: center;
background-color: orange;
height: 100%;
}
.textbox {
width: 66%;
height: 90%;
background-color: red;
resize: none;
}
#submit {
text-align: center;
background-color: pink;
height: 48px;
padding: 0;
margin: 0;
}
.errors {
background-color: aqua;
}
#media only screen and (max-width: 767px) {
#inputs {
height: auto;
width: auto;
margin: 0;
padding: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form">
<form method="post">
<div class="row-fluid" id="inputs">
<div class="col-md-6">
Message:<br />
<textarea type="text" name="message" class="textbox">#message</textarea>
</div>
<div class="col-md-6">
Phones:<br />
<textarea type="text" name="phones" class="textbox">#phones</textarea>
</div>
</div>
<div class="row-fluid" id="submit">
<div class="col-md-12">
<input type="submit" name="submit" class="btn btn-lg btn-success" />
</div>
</div>
</form>
</div>