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;
}
}
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.
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>
I'm struggling to get a font-awesome icon alongside a heading and paragraph like in the picture below:
How can I achieve this?
You can do something like this:
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<div id="contenedor">
<div class="left">
<h2>Nice Work</h2>
<p>We possess within us two</p>
<p>winds. So far I have written</p>
<p>only of the conscious mind.</p>
</div>
<div class="right">
<i class="fa fa-search"></i>
</div>
</div>
CSS:
#contenedor {
font-family: 'Roboto', sans-serif;
width: 500px;
height: 500px;
background: #FFF;
float: left;
display: block;
}
.left {
float: left;
margin-right: 20px;
text-align: right;
}
.left h2 {
font-weight: bold;
}
.left p {
line-height: 18px;
color:#BDC3C7;
}
.right {
padding-top: 20px;
}
.right i {
background: #1DCFD1;
padding: 20px;
border-radius: 30px;
color:#FFF;
}
Working Demo
I know this is probably totally against the whole idea of the grid system and the responsiveness but let's just assume I want to do the following anyway:
I have the layout that you can see in the picture below.
The problem is initially the whole image+text part takes col-md-9 and the twitter feed takes col-md-2 span on a 1920x 1080 screen. However when displayed on a screen of smaller resolution like 1280x800, I can keep the SAME LAYOUT by changing the image+text part to take up col-md-5 span. So my question is, is it possible to change the element's col-md class using media queries ? I know CSS cannot touch an elements classes but I thought maybe bootstrap came along with a solution. Otherwise I know I can use JavaScript to get the window size and swap the classes.
Here is some code should you need. I didnt want to post any code that is not relevant but if you guys need the whole thing, I can set up a jsfiddle prob.
Thanks ! 1
HTML:
<div class="newsfeed">
<div class="container">
<div class="row">
<div class="col-md-11 mainfeed">
<div class="row top-buffer">
<div class="col-md-3">
<img src="images/chris.jpg" width="190px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some text here</h2>
<p id="bodypart">Some more text here </p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/city.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some news text </h2>
<p id="bodypart">xxxxxxxxxxx
</p>
</div>
</div>
</div>
<div class="col-md-1 pull-right">
<!-- Tweet RRS-->
<div class="tweets pull-right">
<a class="twitter-timeline" href="https://twitter.com/sinanspd" data-widget-id="540693554432323584"
width="380px" data-chrome="transparent noscrollbar">Tweets by #sinanspd</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>
</div>
</div>
</div>
</div>
</div>
Relevant CSS:
/* ----------COMMON STYLING ------ */
body{
background-color: black !important;
}
.container{
width: 100%;
}
.jumbotron{
height: 340px;
background-size: cover;
background-image: url("images/banner.jpg");
background-repeat: no-repeat;
background-position: center;
}
.nav li{
display: inline;
margin-right: 130px;
}
#nomarginleft{
margin-right: 0px;
}
.nav a{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
text-decoration: none !important;
}
.pull-left{
margin-left: -350px;
margin-top: -30px;
}
.pull-right{
margin-right: -300px;
margin-top: -30px;
}
.nav{
background-color: black;
width: 100%;
}
.fixed {
position: fixed;
top: 0px;
height: 50px;
z-index: 1;
background-color: black;
}
/*--------------------- HOME PAGE ---------------- */
#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
border-radius: 4px;
background-color: white;
}
#display ul{
position: relative;
margin: 0;
padding: 0;
height: 960px;
width: 420px;
list-style: none;
}
#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}
#head > p{
font-family: "Crimson Text";
font-size: 30px;
font-weight: bold;
}
#head{
margin-top: 30px;
margin-left: 220px;
}
.newsfeed{
width: 86%;
height: 800px;
margin-left: -160px;
}
.mainfeed{
margin-left: 130px;
}
.pullup{
margin-top: 0px;
}
.top-buffer{
margin-top: 20px;
}
.topborder{
border-top: 1px solid white;
}
.tweets{
background-color: rgba(247,12,12,0.3);
border: 1px solid white;
margin-left: 50px;
border-color: white;
}
#media (min-width: 1000px) and (max-width: 1300px){
.jumbotron{
height: 250px;
}
.nav li{
margin-right: 50px;
}
.nav a{
font-size: 25px;
}
.pull-left{
margin-left: -60px;
}
.pull-right{
margin-right: -40px;
}
#display{
width: 700px;
height: 350px;
}
#head > p{
font-size: 25px;
}
#head{
margin-top: 30px;
margin-left: 80px;
display: block;
}
.newsfeed{
width: 86%;
}
.newsfeed h2{
font-size: 20px;
}
.mainfeed{
margin-left: 230px;
}
.newsfeed h2, .newsfeed p{
margin-left: 0px;
}
.top-buffer{
width: 800px;
}
.newsfeed .pull-right{
margin-right: -120px;
}
.tweets{
margin-right: -500px;
}
}
Why don't you change your code like below
<div>
<div class="col-lg-9 col-md-5">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
<div class="col-lg-3 col-md-5">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
</div>
So now, on bigger screens the screen will we divided 9 cols and 3 cols, on smaller screen sizes it will be 5 cols each.
If you want to change the layout for smaller screen i.e. tablets and screen just user col-sm-xx and col-xm-xx respectively.
I am trying to reproduce a layout similar to Youtube to practice some of the things I've learned just recently. How can I reposition an embedded Youtube video?
I tried making a parent div for the embedded video with display: relative, but it's not budging.
http://jsfiddle.net/GztRt/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bluetube.css" /> <title> Webpage #3 </title>
</head>
<body>
<div id="header"> <!-- Top header with logo, search bar, upload button-->
<a href="http://www.youtube.com" id="logo">
<div id="blue"> Blue</div>
<div id="tube">Tube</div>
</a>
<form style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get">
Search <input type="text" name="searchinput">
<input type="submit" value="Submit">
</form>
<a href"http://www.amazon.com" id="uploadparent">
<div id="upload">Upload</div>
</a>
</div>
<div id="videobox">
<object width="420" height="315">
<param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ? hl=en_US&version=3"></param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true">
</embed></object>
</div>
<div id="column_box_right"></div> <!-- Related Videos spans the Right side! -->
<div id="column_box_left>ddddddddddddddddddddddd</div> <!-- column spans the left side! -->
<div id="vidinfo"></div>
<div id="footer"></div>
CSS:
html body {
width: 100%;
}
#header {
height: 35px;
background-color: grey;
margin-top: -6px;
position: relative;
margin-left: -7px
overflow: auto;
min-width: 1000px;
}
#blue {
height: 35px;
width: 60px;
background-color: grey;
border-radius: 4px;
text-align: center;
color: blue;
display: inline-block;
font-size: 20px;
font-family: Verdana;
}
#logo {
float: left;
margin-right: 14%;
}
#tube {
height: 35px;
width: 60px;
background-color: blue;
border-radius: 4px;
text-align: center;
display: inline-block;
color: white;
font-size: 20px;
font-family: Verdana;
}
#upload {
height: 30px;
width: 100px;
}
You had an extra space in your #videobox div. Changing it from #video box to #videobox allowed the div to position correctly in your jsfiddle. I'm not sure if this is your issue on your site, but since most copy and paste, I figured I'd throw it out there.
This will move your videobox div where ever you want on the screen. This will move it to the center.
#videobox {
display: block;
height: 100%;
left: 25%;
position: absolute;
top: 25%;
width: 100%;
}