im not good with mdl lite but i want to create an mdl card that looks exactly as it is on the image below how do i do that?
after reading on documentation this is what i came up with. but it doesn't look good.
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
height: 60px;
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
]1]1
The use of mdl-grid within mdl-card makes sense, but won't give you much flexibility (e.g. the position of the separator/divider). I propose a solution with flex instead.
For the right aligned menu button I have used the mdl-card__menu from the card component. The rest, I leave it to you ;) Bare in mind the example you give does not use the default Roboto font.
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
/* height: 50px; */
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
/* Additional css below */
.mdl-card {
min-height: 0;
}
.mdl-card__menu {
color: white;
}
/* .mdl-card__title {
padding: 12px 32px;
align-items: center;
} */
/* .mdl-card__title-text {
font-size: 20px !important;
font-weight: 400;
} */
.card-content {
display: flex;
justify-content: space-around;
align-items: center;
}
.card-cell {
text-align: center;
}
.card-cell h4 {
margin: 8px 0;
font-weight: 400;
}
.card-divider {
display: block;
height: 50px;
width: 1px;
background-color: rgba(0, 0, 0, 0.3);
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">more_vert</i>
</button>
</div>
<div class="mdl-card__supporting-text card-content">
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<span class="card-divider"></span>
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
Related
I am trying to build a simple webpage using Bootstrap and D3, but I do not know how to get rid of all the whitespace at the bottom. I would like to get rid of it.
I have tried setting the min-height of the body and html to 100%, but it hasn't done anything. My code is here: https://github.com/eelegiap/thesis-code/tree/main/search
body {
padding-left: 3vh;
padding-top: 3vh;
padding-bottom: 20px;
}
#searchCol {
padding-left: 6vh
}
form {
width: 25%
}
#results {
padding-right: 10vh;
}
#resultsContainer {
max-height: 30%;
overflow-y: auto
}
.result {
padding-left: 4vh;
}
.poemResult {
cursor: pointer;
border-radius: 10px;
padding-left: 10px;
padding-top: 5px;
}
#poemContainer {
max-height: 30%;
overflow-y: auto;
}
#poemMeta {
padding-top: 10vh;
padding-left: 15vh;
padding-bottom: 5vh
}
#poemTxt {
padding-left: 15vh;
padding-bottom: 10vh;
}
.input-group {
max-width: 75%;
padding-bottom: 5vh
}
/* Tooltip text */
.titleTooltip .tooltiptext {
visibility: hidden;
position: absolute;
text-align: left;
width: fit-content;
height: fit-content;
padding: 2px;
padding-right: 15px;
font: 12px sans-serif;
background: #e5ffff;
border: 1px solid gray;
border-radius: 8px;
pointer-events: none;
z-index: 1;
}
.titleTooltip:hover .tooltiptext {
visibility: visible;
}
.token mark {
display: contents;
}
input,
.dropdown-toggle {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.searchBar {
min-height: 50px
}
#search {
background-color: lightsteelblue;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<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="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- MDB -->
<link rel="stylesheet" href="mdb5/css/mdb.min.css" />
<body>
<div class="container">
<br>
<div class="row">
<h2>Contemporary Russian Internet Poetry</h2>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row" id="poemContainer">
<div id="poemMeta"></div>
<div id="poemTxt"></div>
</div>
</div>
<div class="col-sm-6" id="searchCol">
<div class="row">
<div class="input-group">
<div class="form-outline flex-fill searchBar">
<input type="search" id="form1" class="form-control form-control-lg" />
<label class="form-label" for="form1">Search by keyword(s)</label>
</div>
<button type="button" id='search' class="btn searchBar">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row" id="resultsContainer">
<div id="results"></div>
</div>
</div>
</div>
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="mdb5/js/mdb.min.js"></script>
<!-- embedding JS libraries -->
<!-- d3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- own js files -->
<script src="js/main.js"></script>
<script src="js/text.js"></script>
<script src="js/searchResults.js"></script>
You are using padding-bottom: 20px; in your body. It created the bottom padding or some spaces in the down side of your websites.
You have to remove it.
To be honest, idk why this works, but I changed the max-height variables to pixel heights instead, and this fixed the trailing whitespace problem.
I'm building twitter clone and it's UI have a 3 column layout.
Working Implementation
When access it from desktop, it shows like this:
-------------------------------------------
| Navbar| Feed | Follow |
-------------------------------------------
When access it from tablet or mid size device, it shows like this:
-------------------------------------------
| Navbar| Feed |
-------------------------------------------
When access it from mobile or small size device, it shows like this(Navbar should be at bottom):
--------------------------------------------------
| Feed |
| Nav-item-1| Nav-item-2 | Nav-item-3| Nav-item-4|
--------------------------------------------------
I'm successful in making layout responsive for tablet and desktop but for mobile I'm having issues.
This is what I have tried:
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
}
Full Code:
import "./styles.css";
export default function App() {
return (
<div className="wrapper">
<div className="row">
<nav className="bootomTab d-none d-sm-flex col-sm-2 col-lg-3">
<div>
<div className="logo">
<a href="/home">
<img src="/twitter.png" alt="logo" />
</a>
</div>
<a href="/home">
<i className="fas fa-home"></i>
</a>
<a href="/search">
<i className="fas fa-search"></i>
</a>
<a href="/notifications">
<i className="fas fa-bell"></i>
</a>
<a href="/messages">
<i className="fas fa-envelope"></i>
</a>
<a href="/profile">
<i className="fas fa-user"></i>
</a>
<a href="/signout">
<i className="fas fa-sign-out-alt"></i>
</a>
</div>
</nav>
<div className="mainSectionContainers col-12 col-sm-8 col-lg-5 ml-2">
<div className="titleContainer">
<h1>Home</h1>
</div>
Feed
</div>
<div className="d-none d-lg-flex col-md-2 col-lg-4 mt-5">
{/* Follow suggestions */}
<aside className="followSuggestion">
<div className="followSuggestionHeader">
<h2>Who to follow</h2>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
<div className="followUsernameContainer">
<div className="userImageContainer">
<img src="/defaultProfilePic.jpg" alt="user pic" />
</div>
<div className="midFollowContainer">
<div className="displayName">
<span>Yogesh Yadav</span>
</div>
<div className="username">
<span>#yogeshdecodes</span>
</div>
</div>
<div className="buttonContainer">
<button id="submitPostButton">Follow</button>
</div>
</div>
</aside>
</div>
</div>
</div>
);
}
CSS Code:
div .logo {
width: 50px;
height: 50px;
}
div .logo img {
width: 100%;
}
nav {
display: flex;
flex-direction: column;
align-items: flex-end;
height: 100%;
}
nav a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 30px;
width: 55px;
height: 55px;
text-decoration: none;
color: #212529;
}
nav a:hover {
background-color: var(--buttonHoverBg);
color: var(--primary-blue);
border-radius: 50%;
}
.mainSectionContainers {
padding: 0;
margin: 0 -10px 0 10px;
border-left: 1px solid #e6ecf0;
border-right: 1px solid #e6ecf0;
}
.titleContainer {
height: 53px;
padding: 0 15px;
display: flex;
align-items: center;
border-bottom: 1px solid #e6ecf0;
flex-shrink: 0;
}
.followSuggestion {
background-color: rgb(247, 249, 249);
border-radius: 16px;
padding: 15px;
margin: 0px 20px 20px 20px;
}
.followSuggestionHeader {
border-bottom: 1px solid #e6ecf0;
}
.followSuggestionHeader h2 {
font-size: 20px;
font-weight: 800;
}
.followUsernameContainer {
flex: 1;
display: flex;
padding: 12px 0;
border-bottom: 1px solid #e6ecf0;
}
.midFollowContainer {
padding: 0 15px;
}
.userImageContainer {
width: 50px;
height: 50px;
}
.userImageContainer img {
width: 100%;
border-radius: 50%;
background-color: white;
}
#submitPostButton {
background-color: #1fa2f1;
color: white;
border: none;
border-radius: 40px;
padding: 7px 15px;
}
#media (max-width: 480px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
align-items: flex-start;
flex-direction: row !important;
}
.logo {
display: none;
}
}
Finally, I managed to make it fully responsive.
The issue is because of the wrong breakpoint(480px) I have set and extra div present outside nav-items which override parent class property.
Changes I have made in css:
#media (max-width: 576px) {
.bootomTab {
display: flex !important;
position: absolute;
bottom: 0;
height: 50px;
background-color: white;
border-top: 1px solid #e6ecf0;
flex-direction: row !important;
}
.bootomTab a {
flex-grow: 1;
}
.logo {
display: none;
}
.mobileHide{
display: none;
}
}
On desktop, it shows like this:
On tablet, it shows like this:
On mobile, it shows like this:
This containers are arranged using nested flexbox. When I added an unordered list with zero padding, it got outside the child container. Not only that it also goes outside the parent container.
:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>
Picture of the mentioned problem: https://prnt.sc/plgv0y
If you want to help me debug this view this codepen link:
https://codepen.io/bishant-bhattarai/pen/qBBqqYE
Since this was a small project I didn't add any comments, sorry for inconvineince.
This is probably due to the default value of the CSS property list-style-position.
You can try and change that like this:
:root {
--main-bg-color: #3D3E5D;
--bg-color-red: #F06D4F;
--bg-color-aqua: #2DA6A4;
--bg-color-orange: #EFB85E;
--txt-color-primary: black;
--txt-color-secondary: white;
--heading: 3rem;
--sub-heading: 2rem;
--normal: 1rem;
--small: 0.5rem;
--main-padding: 10px;
}
* {
margin: none;
padding: 0;
box-sizing: border-box;
}
.container__main {
width: 90%;
margin: auto;
}
.container__flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex__box {
font-weight: 900;
font-size: var(--normal);
background-color: aqua;
flex: 0 0 calc(50% - 10px);
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.container__main>.container__flex {
margin-bottom: 10px;
}
.container__flex>.flex__box {
padding: var(--main-padding);
}
.p-0 {
padding: 0 !important;
}
ul {
list-style-position: inside;
}
<div class="container__main">
<div class="container__flex">
<div class="flex__box">
<b></b>
<span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
</div>
<div class="flex__box gray">
<div class="container__flex">
<div class="flex__box p-0 red">
<span class="sub-heading">Links</span>
<ul>
<li>Chubkins</li>
<li>W3 Schools</li>
<li>Learn Web Dev</li>
<li>Colour Reference</li>
</ul>
</div>
<div class="flex__box p-0 red">
</div>
</div>
</div>
</div>
<div class="container__flex">
<div class='flex__box'>
box1
</div>
<div class='flex__box'>
box2
</div>
</div>
</div>
cf. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position
I am designing a messenger-like layout with Bootstrap 4.0.0-alpha.6.
Right now I am having trouble with media object. It should break-word and show ellipsis, but that's not what happens.
Just .most-recent-message should show ellipsis.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Live: https://jsfiddle.net/f55huf3j/
Ps: I found a similar issue, but the given workaround didn't work for me.
You can add the overflow property to the parent, in this case .media-body
fiddle
body {
background: #f4f4f4;
padding: 1rem;
}
.conversation {
display: block;
padding: 0.75rem 1rem;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 4px;
}
.media-body {
overflow: hidden;
}
h6 {
margin-bottom: 0.15em;
}
.most-recent-message {
color: rgba(#000, 0.5);
font-size: 0.85em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<!-- Sidebar - begin -->
<div class="col-12 col-md-3">
<div class="card">
<!-- Recent conversation - begin -->
<a href="#" class="conversation">
<div class="media">
<img class="d-flex align-self-center mr-1 avatar" src="http://i.imgur.com/CEtZcrC.jpg">
<div class="media-body">
<h6>
Sarah Martins Smit dfd df df dfh
</h6>
<div class="most-recent-message">
We can track errors for this kind of bug
</div>
</div>
</div>
</a>
<!-- Recent conversation - end -->
</div>
</div>
<!-- Sidebar - end -->
<!-- Chat - begin -->
<div class="col-12 col-md-9">
<div class="card">
Content
</div>
</div>
<!-- Chat - end -->
</div>
You need to move the overflow rules to the parent div which is .media-body and the .most-recent-message div needs to be displayed as inline. Also you have some CSS errors like an extra close bracket. Here's what your css should be:
body {
background: #f4f4f4;
padding: 1rem;
}
.media-body{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.conversation {
display: block;
padding: 0.75rem 1rem;
&:hover {
background: rgba(#000,0.05);
text-decoration: none;
}
}
.avatar {
width: 50px;
height: 50px;
border-radius: 4px;
}
.media {
}
h6 {
margin-bottom: 0.15em;
}
.most-recent-message {
color: rgba(#000,0.5);
font-size: 0.85em;
display:inline;
}
I think you need to define the width of the parent container.
https://jsfiddle.net/7x93ofzm/2/
.media-body {
width: calc(100% - 54px);
}
Should only need:
.media-body {
display: inline-grid;
}
Fiddle
I have an app that switches between stylesheets when the user rotates their tablet. There is a container div which holds everything. Inside the container div there is 2 divs. The one div holds the math problem and the other div holds a chalkboard.
In landscape mode the math problem and chalkboard are next to each. THIS WORKS RIGHT.
Example: ([Math Problem] [Chalkboard]) --- Side-by-side
In portrait mode the math problem should be above the chalkboard. RIGHT NOW, their just stacked on top of one another.
Example: ([Math Problem]
[Chalkboard]) --- Chalkboard sits below math problem
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>quiz</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="quiz.css" rel="stylesheet" />
<script src="quiz.js"></script>
</head>
<body>
<div class="container">
<div class="mathSide">
<!-- QUIZ STATS -->
<div id="quizStats">
<p class="alignLeft" id="statQuestionDiv"></p>
<p class="alignCenter" id="statTimerDiv"></p>
<p class="alignRight" id="statScoreDiv"></p>
</div>
<div style="clear: both;"></div>
<!-- QUIZ STATS -->
<!-- MATH EQUATION -->
<div class="mathEquation">
<div class="line1Num" id="line1NumDiv"></div>
<div class="line2">
<div class="line2Ope" id="line2OpeDiv"></div>
<div class="line2Num" id="line2NumDiv"></div>
</div>
<div class="line">
<div class="result"></div>
</div>
</div>
<!-- MATH EQUATION -->
<!-- ANSWERS -->
<!-- Multiple choice -->
<div class="center">
<div id="multipleChoiceDiv">
<button class="multipleChoice" id="btnChoice1"></button><br />
<button class="multipleChoice" id="btnChoice2"></button><br />
<button class="multipleChoice" id="btnChoice3"></button><br />
<button class="multipleChoice" id="btnChoice4"></button>
</div>
</div>
<!-- Multiple choice -->
<!-- Fill in the blank -->
<div class="center">
<div id="fillBlankDiv">
<input class="textBox2" id="userAnswer" type="text" />
<button class="fillBlank" id="btn7">7</button>
<button class="fillBlank" id="btn8">8</button>
<button class="fillBlank" id="btn9">9</button><br />
<button class="fillBlank" id="btn4">4</button>
<button class="fillBlank" id="btn5">5</button>
<button class="fillBlank" id="btn6">6</button><br />
<button class="fillBlank" id="btn1">1</button>
<button class="fillBlank" id="btn2">2</button>
<button class="fillBlank" id="btn3">3</button><br />
<button class="fillBlank" id="btn0">0</button>
<button class="fillBlank" id="btnNeg">+/-</button>
<button class="fillBlank" id="btnOk">OK</button>
</div>
</div>
<!-- Fill in the blank -->
<!-- ANSWERS -->
<!-- (IN)CORRECT -->
<div class="center2">
<div id="checkDiv"></div>
</div>
<!-- (IN)CORRECT -->
</div>
<!-- CANVAS -->
<div class="canvasSide">
<canvas id="can1" width="500" height="600" style="border:2px solid #fff; background-color: #026236;"></canvas>
</div>
<!-- CANVAS -->
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abErase', label:'Erase', icon:''}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abPause', label:'Pause', icon:''}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abHome', label:'Home', icon:''}" type="button"></button>
</div>
</body>
</html>
My CSS:
body {
background-color: #00522c;
}
.container {
width: 820px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
.center {
text-align: center ;
}
.mathSide {
width: 300px;
float: left;
}
.canvasSide {
width: 500px;
float: left;
margin-left: 20px;
}
/* QUIZ STATS */
.alignLeft {
float: left;
width: 33%;
text-align: left;
font-size: 125%;
font-weight: bold;
}
.alignCenter {
float: left;
width: 33%;
text-align: center;
font-size: 125%;
font-weight: bold;
}
.alignRight {
float: left;
width: 33%;
text-align: right;
font-size: 125%;
font-weight: bold;
}
/* QUIZ STATS */
/* MATH EQUATION */
.mathEquation {
width: 300px;
}
.line1Num, .line2 {
width: 100%;
text-align: right;
display: table;
font-size: 400%;
}
.line1Num {
float: right;
font-size: 400%;
}
.line2Ope {
width: auto;
float: left;
}
.line2Num {
width: auto;
float: right;
}
.line {
width: 100%;
text-align: right;
border-top: 4px solid black;
border-color: white;
}
/* MATH EQUATION */
/* ANSWERS */
.multipleChoice {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
}
.multipleChoiceRed {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
background-color: red;
}
.multipleChoiceGreen {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
background-color: green;
}
.textBox {
}
.fillBlank {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 10px;
font-size: 150%;
}
/* ANSWERS */
/* (IN)CORRECT */
.center2 {
text-align: center ;
font-size: 300%;
}
/* (IN)CORRECT */
.textBox2[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: #026236;
}
.textBox2A[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: red;
}
.textBox2B[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: green;
}
#media screen and (-ms-view-state: snapped) {
}
#media screen and (-ms-view-state: fullscreen-portrait) {
.mathSide {
width: 300px;
position: absolute;
}
.canvasSide {
width: 500px;
position: absolute;
}
}