I am writing a virtual keyboard but I am getting "eaten alive". I am trying to end up with equal key widths on each row. QWERTY keyboard. But top row has 10 keys, 2nd row has 9 keys and third row has 8 keys. I cannot figure out how to make each key the same size across all platforms. And have minimal margins on each platform (mostly edge to edge). Backspace key is only one I am trying to make intentionally bigger.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
body {
font-family: Arial, serif;
text-align: center;
padding-top: auto;
background-color: lightgray;
user-select: none;
}
.keyboard {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 5px;
margin: auto;
align-items: center;
max-width: 540px;
box-sizing:border-box;
user-select: none;
}
.keyboard-row {
display: flex;
width: 100%;
touch-action: manipulation;
user-select: none;
}
.keyboard-key {
display: flex;
justify-content: center;
align-items: center;
width: 9.5%;
margin: 0.8%;
height: 50px;
border: 1px solid gray;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
box-sizing: border-box;
user-select: none;
touch-action: manipulation;
}
</style>
</head>
<body>
<div class="container-top">
<h1>example</h1>
</div>
<div class="keyboard">
<div class="keyboard-row">
<div class="keyboard-key" data-value="Q" style="margin-left: 1%;">Q</div>
<div class="keyboard-key" data-value="W">W</div>
<div class="keyboard-key" data-value="E">E</div>
<div class="keyboard-key" data-value="R">R</div>
<div class="keyboard-key" data-value="T">T</div>
<div class="keyboard-key" data-value="Y">Y</div>
<div class="keyboard-key" data-value="U">U</div>
<div class="keyboard-key" data-value="I">I</div>
<div class="keyboard-key" data-value="O">O</div>
<div class="keyboard-key" data-value="P" style="margin-right: 1%;">P</div>
</div>
<div class="keyboard-row">
<div class="keyboard-key" data-value="A" style="margin-left: 5%;">A</div>
<div class="keyboard-key" data-value="S">S</div>
<div class="keyboard-key" data-value="D">D</div>
<div class="keyboard-key" data-value="F">F</div>
<div class="keyboard-key" data-value="G">G</div>
<div class="keyboard-key" data-value="H">H</div>
<div class="keyboard-key" data-value="J">J</div>
<div class="keyboard-key" data-value="K">K</div>
<div class="keyboard-key" data-value="L" style="margin-right: 5%;" >L</div>
</div>
<div class="keyboard-row">
<div class="keyboard-key" data-value="Z" style="margin-left: 8%;">Z</div>
<div class="keyboard-key" data-value="X">X</div>
<div class="keyboard-key" data-value="C">C</div>
<div class="keyboard-key" data-value="V">V</div>
<div class="keyboard-key" data-value="B">B</div>
<div class="keyboard-key" data-value="N">N</div>
<div class="keyboard-key" data-value="M">M</div>
<div class="keyboard-key" data-value="backspace" style="width: 68px; margin-left: 7px; margin-right: 8%;">BkSp</div>
</div>
</div>
</body>
</html>
I have tried percentages and pixels but it will vary across viewports.
Related
I am making a layout of cards(images) and want them to be the same size.
I want 4 columns in each row, 1 card per column. Then my next row will have 4 more, so on and so forth.
Instead of my cards taking up the 4 columns of each row, they're only taking up 3, then the 4th card overflows.
My html for this particular page is
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="C:\Users\ADMIN-SURV\Desktop\training_guide\styles.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
<style>
</style>
</head>
<body>
<nav style="display: grid; justify-content: center">
<ul>
<li>Home</li>
<li>Software</li>
<li>Server Room</li>
<li>Our Equipment</li>
<li>Cables and Wiring</li>
<!-- <li>References</li> -->
</ul>
</nav>
<div class="container">
<div class="row">
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/activityss.jpg" alt="Activity Doc" />
<div style="justify-items: center;">Unusual Activity</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/accscreenshot.jpg" alt="ACC Doc" />
<div style="justify-items: center;">ACC Guide</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/appearancess.jpg" alt="Appearance Doc" />
<div style="justify-items: center;">Appearance Search</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/encoderss.jpg" alt="Encoder Doc" />
<div style="justify-items: center;">Encoders</div>
</div>
</div>
<div class="row">
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/facialss.jpg" alt="Facial Doc" />
<div style="justify-items: center;">Facial Recognition</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/focusss.jpg" alt="Focus Doc" />
<div style="justify-items: center;">Focus of Attention</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/motionss.jpg" alt="Motion Doc" />
<div style="justify-items: center;">Unusual motion</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/opsss.jpg" alt="Operations Doc" />
<div style="justify-items: center;">MGC Operations</div>
</div>
</div>
<div class="row">
<div style="justify-content: center" class="col-md-3">
<!-- placeholder -->
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div class="col-md-3">
<!-- placeholder -->
</div>
</div>
</div>
</body>
</html>
my css (sloppy)
body {
height: 100%;
/* width: 100%; */
display: grid;
padding-bottom: 5%;
}
.container{
display: grid;
background-color: lightgrey;
background-size: cover;
/* grid-row-gap: 2em; */
/* padding:3em;
grid-auto-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
*/
};
/* .row {
display: grid;
padding:3em;
grid-auto-rows: 1fr;
background-color: lightgray;
background-size: cover;
width: fit-content;
} */
.myborder{
border: lightgray 1px solid;
padding: 2px;
}
.label{
font-weight: bolder;
}
img{
width: auto;
height:auto;
border:none;
position: relative;
padding: 1em;
transition:transform 0.25s ease;
}
/* img:hover{
} */
div {
display: grid;
grid-auto-flow: inherit;
}
#roundImage{
border-radius: 20%;
}
li {
display: inline;
/* border-style: solid;
border-width: thin;
border-radius: 15px; */
padding: 5px;
margin:10px;
}
nav {
padding-top: 10%
}
/* change subtitle to h2 */
.subtitle{
font-size:larger;
text-align: center;
font-weight: bolder;
align-self: center;
justify-content: center;
text-decoration:underline
}
h2{
display: grid;
justify-content: center;
font-size: xx-large;
/* padding-bottom: 1em; */
}
h1{
font-size: xxx-large;
text-align: center;
font-weight: bolder;
display: grid;
align-content: center;
justify-content: center;
/* padding-top: 5%;
padding-bottom: 3%; */
}
#noAtts{
box-shadow: none;
}
.rmImg{
padding:2 em;
border-radius: 15%;
}
#longImage{
height:650px;
width:auto;
padding-left: 50%;
}
.appearanceImg{
height:auto;
width:400px;
position: relative;
}
/* Trying to figure out hover overlay */
/* img {
transition:transform 0.25s ease;
} */
img:hover {
-webkit-transform:scale(1.1); /* or some other value */
transform:scale(1.1);
}
.layout{
grid-template-columns: 25%, 25%, 25%, 25%;
grid-template-rows: auto;
}
.centerImage{
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
margin: .5em;
}
[![layout][1]][1]
[1]: https://i.stack.imgur.com/bXidE.jpg
I added col-12 to your HTML and gave it a flex display on CSS. From here, I suggest making your parent container either larger or reducing some of your margin or padding.
body {
height: 100%;
width: 100%;
display: grid;
padding-bottom: 5%;
}
.container{
display: grid;
background-color: lightgrey;
background-size: cover;
/* grid-row-gap: 2em; */
/* padding:3em;
grid-auto-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
*/
};
/* .row {
display: grid;
padding:3em;
grid-auto-rows: 1fr;
background-color: lightgray;
background-size: cover;
width: fit-content;
} */
.myborder{
border: lightgray 1px solid;
padding: 2px;
}
.label{
font-weight: bolder;
}
img{
width: auto;
height:auto;
border:none;
position: relative;
padding: 1em;
transition:transform 0.25s ease;
}
/* img:hover{
} */
div {
display: grid;
grid-auto-flow: inherit;
}
#roundImage{
border-radius: 20%;
}
li {
display: inline;
/* border-style: solid;
border-width: thin;
border-radius: 15px; */
padding: 5px;
margin:10px;
}
nav {
padding-top: 10%
}
/* change subtitle to h2 */
.subtitle{
font-size:larger;
text-align: center;
font-weight: bolder;
align-self: center;
justify-content: center;
text-decoration:underline
}
h2{
display: grid;
justify-content: center;
font-size: xx-large;
/* padding-bottom: 1em; */
}
h1{
font-size: xxx-large;
text-align: center;
font-weight: bolder;
display: grid;
align-content: center;
justify-content: center;
/* padding-top: 5%;
padding-bottom: 3%; */
}
#noAtts{
box-shadow: none;
}
.rmImg{
padding:2 em;
border-radius: 15%;
}
#longImage{
height:650px;
width:auto;
padding-left: 50%;
}
.appearanceImg{
height:auto;
width:400px;
position: relative;
}
/* Trying to figure out hover overlay */
/* img {
transition:transform 0.25s ease;
} */
img:hover {
-webkit-transform:scale(1.1); /* or some other value */
transform:scale(1.1);
}
.layout{
grid-template-columns: 25%, 25%, 25%, 25%;
grid-template-rows: auto;
}
.centerImage{
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
margin: .5em;
}
.col-12 {
display: flex;
}
.row {
padding-right: calc(var(--bs-gutter-x) * 3);
}
[![layout][1]][1]
[1]: https://i.stack.imgur.com/bXidE.jpg
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="C:\Users\ADMIN-SURV\Desktop\training_guide\styles.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
<style>
</style>
</head>
<body>
<nav style="display: grid; justify-content: center">
<ul>
<li>Home</li>
<li>Software</li>
<li>Server Room</li>
<li>Our Equipment</li>
<li>Cables and Wiring</li>
<!-- <li>References</li> -->
</ul>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/activityss.jpg" alt="Activity Doc" />
<div style="justify-items: center;">Unusual Activity</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/accscreenshot.jpg" alt="ACC Doc" />
<div style="justify-items: center;">ACC Guide</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/appearancess.jpg" alt="Appearance Doc" />
<div style="justify-items: center;">Appearance Search</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/encoderss.jpg" alt="Encoder Doc" />
<div style="justify-items: center;">Encoders</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/facialss.jpg" alt="Facial Doc" />
<div style="justify-items: center;">Facial Recognition</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/focusss.jpg" alt="Focus Doc" />
<div style="justify-items: center;">Focus of Attention</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/motionss.jpg" alt="Motion Doc" />
<div style="justify-items: center;">Unusual motion</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/opsss.jpg" alt="Operations Doc" />
<div style="justify-items: center;">MGC Operations</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div style="justify-content: center" class="col-md-3">
<!-- placeholder -->
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div class="col-md-3 card">
<!-- placeholder -->
</div>
</div>
</div>
</div>
</body>
</html>
I added the following CSS to fix your padding, you can do it however.
.row {
padding-right: calc(var(--bs-gutter-x) * 3);
}
Click full-page
You are applying margin: .5em; to .card which is also the .col-md-3 throwing off the spacing of the grid. If you need that margin nest the .cards inside the .col-*s:
<div class="container">
<div class="row">
<div style="justify-content: center" class="col-md-3">
<div class="card">
<img />
....
</div>
</div>
<div style="justify-content: center" class="col-md-3">
<div class="card">
<img />
....
</div>
</div>
....
</div>
</div>
I don't know how to center icon with the text. I have SVG + text. I can do it with plain CSS(flex-box) but I have to use bootstrap. Also, I want to center text, so it will be centered as other parts of the webpage, I want it to be aligned vertically
I have this:
I want to get this:
I have tried different solutions but did not come up with a good idea.
So the questions are:
How to make text to be centered to the left so it looks centered?
How to aligned svg icon with the text?
thanks
<section class="perks">
<img src="./media/blueCircle.svg" alt="" />
<div class="container">
<div class="row">
<div class="col perksFirst">Perks of Meetlete</div>
<div class="w-100"></div>
<div class="row perksList">
<div class="col">Access to our secure video platform!</div>
<div class="col">
<img src="./media/2.svg" alt="" />Calls are executed through our
App!
</div>
<div class="w-100"></div>
<div class="col">Metelete calls take place on your time!</div>
<div class="col">None of your information is shared!</div>
<div class="w-100"></div>
<div class="col">Build loyalty with your fans!</div>
<div class="col">Make lifetime memories!</div>
<div class="w-100"></div>
<div class="col">Earn up to 10x more than other platforms!</div>
<div class="col">Meetlete calls are timed!</div>
</div>
<div class="w-100"></div>
<div class="col">
<button class="earlyAccess btn">Early access</button>
<div class="launchDate">Launching 2/14/21!</div>
</div>
</div>
</section>
.perks {
display: flex;
text-align: center;
margin-top: 310px;
position: relative;
}
.perks .earlyAccess {
margin-top: 117px;
}
.perks img {
position: absolute;
left: 0;
top: -50%;
}
.perks .row {
justify-content: center;
}
.perksList {
max-width: 860px;
display: flex;
justify-content: center;
align-items: center;
}
.perksList .col {
font-weight: 600;
font-size: 18px;
display: flex;
align-items: center;
display: flex !important;
text-align: start;
margin-top: 26px;
}
.perksFirst {
margin-bottom: 77px;
font-size: 24px;
font-weight: 700;
}
.launchDate {
font-weight: 700;
font-size: 18px;
margin-top: 26px;
}
In order to align icons with the text you can put them together in a
Or you use bootstrap grid https://getbootstrap.com/docs/4.6/layout/grid/. You could use this easily to render it all dynamically, by putting your text in a list.
You can use text-align: center on the outer div (container) to center all. then text-align left in the inner one (perklist) in case this turns your text all left aligned.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
justify-content: center;
margin: auto;
text-align: left;
margin-top: 10px;
}
.heading {
text-align: center;
padding: .5rem;
}
.heading h3 {
font-size: 24px;
font-weight: 700;
text-transform: capitalize;
}
.card {
background: whitesmoke;
padding: 2rem;
border: darkgrey
}
span {
display: flex;
vertical-align: middle;
padding-top: 1rem;
}
span img {
display: inline-flex;
height: 2rem;
}
span a {
font-size: 18px;
font-weight: 600;
line-height: 2rem;
padding-left: .5rem;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solution By Tarak</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="new.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-1"></div>
<div class="card col-xl-10 col-sm-12">
<div class="row">
<div class="heading col-12">
<h3>Perks of Meetlete</h3>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-md-12">
<span><img src="./test-tubes.svg" /><a>Access to our secure video platform!</a></span>
<span><img src="./test-tubes.svg" /><a>Metelete calls take place on your time!</a></span>
<span><img src="./test-tubes.svg" /><a>Build loyalty with your fans!</a></span>
<span><img src="./test-tubes.svg" /><a>Earn up to 10x more than other platforms!</a></span>
</div>
<div class="col-xl-6 col-md-12">
<span><img src="./test-tubes.svg" /><a>Calls are executed through our App!</a></span>
<span><img src="./test-tubes.svg" /><a>None of your information is shared!</a></span>
<span><img src="./test-tubes.svg" /><a>Make lifetime memories!</a></span>
<span><img src="./test-tubes.svg" /><a>Meetlete calls are timed!</a></span>
</div>
</div>
</div>
</div>
</div>
</body>
height of span img == line-height of span a (for it to be inline center)
change svg of your choice.
play with styles.
I would like to change the background color of the grid boxes based on what's selected in the dropdown, but I'm at a loss. If A/3 is selected, boxes 1-3 would change. If C/10 is selected, boxes 1-10 would change. This is my first web-development project, so I may be approaching this wrong. If so, please let me know. Thanks for any help!
.menu
{
overflow: hidden;
background-color: #29648A;
margin:0 auto;
}
.dropdown
{
float: left;
overflow: hidden;
width: 25%;
}
.button
{
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px 10px;
background-color: inherit;
width: 100%;
text-align: center;
}
.dropdown:hover
{
background-color: #2E9CCA;
}
.list
{
display: none;
position: absolute;
background-color: #F9F9F9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: 24.65%;
}
.list a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.list a:hover
{
background-color: #ddd;
}
.dropdown:hover .list
{
display: block;
}
.wrapper
{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
grid-gap: 10px;
max-width: 400px;
margin: 50px auto;
}
.box
{
background-color: #AAABB8;
color: white;
text-align: left;
font-size: 20px;
padding: 10px 10px;
border-radius: 5px;
max-width: 100px;
}
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
</head>
<body>
<div class="menu">
<div class="dropdown">
<button class="button">A</button>
<div class="list">
1
2
3
4
</div>
</div>
<div class="dropdown">
<button class="button">B</button>
<div class="list">
5
6
7
8
</div>
</div>
<div class="dropdown">
<button class="button">C</button>
<div class="list">
9
10
11
12
</div>
</div>
<div class="dropdown">
<button class="button">D</button>
<div class="list">
13
14
15
16
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
</div>
</section>
</body>
</html>
You can use addClass() & removeClass() using jquery
Add some if statements with different id to each box and use that as a selector to connect each column to its own box!
Give it a try and I can help if needed.
I'm new to css and wrote this html code:
<div class="col-1">A</div>
<div class="col-1">B</div>
<div class="col-1">C</div>
<div class="col-1">D</div>
<div class="col-1">E</div>
<div class="col-1">F</div>
<div class="col-1">G</div>
<div class="col-1">H</div>
<div class="col-1">I</div>
<div class="col-1">J</div>
<div class="col-1">K</div>
<div class="col-1">L</div>
and this is my css:
.col-1 {
width: 58px;
background-color: chocolate;
}
write up code for achive this output:
CLICK TO SHOW
but my result is this:
THIS LINK
How can i solve that problem?thanks.
You can simply add a margin margin: 1px; to your col-1 elements like this:
.col-1 {
width: 58px;
background-color: chocolate;
margin: 1px;
/*I just added this to make them inline */
display: inline-block;
}
<div class="col-1">A</div>
<div class="col-1">B</div>
<div class="col-1">C</div>
<div class="col-1">D</div>
<div class="col-1">E</div>
<div class="col-1">F</div>
<div class="col-1">G</div>
<div class="col-1">H</div>
<div class="col-1">I</div>
<div class="col-1">J</div>
<div class="col-1">K</div>
<div class="col-1">L</div>
It will give you the expected results, note that you can edit it with the wanted pixels.
I would reccommend using the new flexbox layout. Browser support is pretty good already (http://caniuse.com/#feat=flexbox) and you can add some vendor prefixes if needed.
.col-wrapper {
display: flex;
}
.col-1 {
width: 58px;
background-color: chocolate;
margin: 0px 6px;
}
<div class="col-wrapper">
<div class="col-1">A</div>
<div class="col-1">B</div>
<div class="col-1">C</div>
<div class="col-1">D</div>
<div class="col-1">E</div>
<div class="col-1">F</div>
<div class="col-1">G</div>
<div class="col-1">H</div>
<div class="col-1">I</div>
<div class="col-1">J</div>
<div class="col-1">K</div>
<div class="col-1">L</div>
</div>
.main{float: left; width: 100%; overflow: hidden; background: #eee; box-sizing: border-box;}
.col-1{float: left; width: 8%; box-sizing: border-box; overflow: hidden; padding: 5px; border: 1px solid #000; margin: 1%; background: #3C3}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.main{float: left; width: 100%; overflow: hidden; background: #eee; box-sizing: border-box;}
.col-1{float: left; width: 8%; box-sizing: border-box; overflow: hidden; padding: 5px; border: 1px solid #000; margin: 1%; background: #3C3}
</style>
</head>
<body>
<div class="main">
<div class="col-1">A</div>
<div class="col-1">B</div>
<div class="col-1">C</div>
<div class="col-1">D</div>
<div class="col-1">E</div>
<div class="col-1">F</div>
<div class="col-1">G</div>
<div class="col-1">H</div>
<div class="col-1">I</div>
<div class="col-1">J</div>
</div>
</body>
</html>
I am experiencing a problem on bootstrap columns on extra small devices. In extra small devices the bootstrap columns overflow and changes the alignment.
I am attaching screenshots from extra small device and other device.
Screenshot of extra small device:
Screenshot of other device(working fine):
Below code is the bootstrap code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="manu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="header row">
<div class="time_remain col-sm-6 col-xs-6 col-md-6 col-ld-6">00 Min 00 Sec</div>
<div class="logout col-sm-6 col-xs-6 col-md-6 col-ld-6">Logout</div>
</div>
<div class="row frame">
<div class="col-sm-9 col-xs-9 col-md-9 col-ld-9 question_wrapper">
<div class="row questions">
1. This is first one?
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
A
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
First
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
B
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Second
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
C
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Third
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
D
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Fourth
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3 col-md-3 col-ld-3 question_status_wrapper">.col-sm-3</div>
</div>
<div class="row status_bar">
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>00 MIN 00 SEC</div> </div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Back</div></div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Next</div></div>
<div class="col-sm-0 col-xs-0 col-md-6 col-ld-6 "></div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Submit</div></div>
</div>
</div>
</body>
</html>
The css code is given below.
.frame
{
height: 70vh;
}
.question_wrapper
{
height: inherit;
background-color: beige;
overflow: auto;
padding-left: 20px;
padding-right: 20px;
}
.time_remain
{
padding-top: 5px;
color: white;
text-align: left;
padding-left: 20px;
}
.logout
{
color: white;
text-align: right;
padding-right: 20px;
padding-top: 5px;
}
.question_status_wrapper
{
height: inherit;
background-color: bisque;
overflow: auto;
}
.header
{
height: 10vh;
background-color: #333333;
color: white;
}
.status_bar
{
position: fixed;
bottom: 0;
width: 100%;
height: 20vh;
background-color : #333333;
display: flex;
}
.questions
{
margin-top: 20px;
margin-left: 20px;
}
.answer_choice_label_div
{
background-color: black;
color: white;
text-align: center;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
}
.answer_choice_div
{
background-color: white;
color: black;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
overflow: inherit;
}
.answer_choice_div:hover
{
background-color: #C6FFF1;
color: black;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
overflow: inherit;
}
.choice_label_choice
{
margin-top: 10px;
margin-bottom: 10px;
min-height: 10vh;
height: 50px;
vertical-align: middle;
}
.time_bar
{
background-color: aliceblue;
color: black;
align-self: center;
text-align: center;
margin-left: 10px;
min-height: 6vh;
display: inline;
vertical-align: middle;
margin-right: 10px;
padding-top: 7px;
}
I have checked the bootstrap grid and didn't find any problem. Please help.
Use media queries , Paste this code in your style.css
#media only screen and (max-width: 580px)
{
.answer_choice_div
{
width: 83%;
}
.answer_choice_label_div
{
width: 10%;
}
}
Use xs for extra small devices. sm for small devices and md for medium devices.
Follow this link for Grid Options
Grid Options - Bootstrap