Here is what my webpage looks like:
As I highlighted in the picture, I'm trying to move the balance element to the right side.
I am trying to use the display:inline-block tag to do this.
Here is my CSS and HTML... what am I doing wrong?
CSS:
/* Game box */
.gamebox{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 4px 4px lightgray;
display:inline-block;
}
/* Balance box */
.balance{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 4px 4px lightgray;
display:inline-block;
}
HTML:
<body>
<div class="noselection">
<ul class="topnav">
<li><a class="active" href="#home"><i class="fa fa-rocket" aria-hidden="true"></i> Play</a></li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Deposit</li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Withdraw</li>
<li><i class="fa fa-university" aria-hidden="true"></i>Faucet</li>
<li><i class="fa fa-life-ring" aria-hidden="true"></i>Help & Support</li>
<?php echo $accountButton; ?>
<li class='right' id="top-balance"><a href=''></a></li>
</ul>
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
<div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some more?</div>
<form id="index">
Bet
<br>
<span>
<input id="userbet" onkeyup="checkBet()" value="100" type="text" name="bet" autocomplete="off">
<span id="beterror" class="errortext">That bet is not a valid bet.</span>
<span id="x2" class="timestwo" onclick="doubleBet()">x2</span>
<span id="/2" class="dividetwo" onclick="divideBet()">/2</span>
</span>
<br>
<span>
Chance<br>
<input id ="userchance" onkeydown="checkChance()" value="50" type="text" name="chance" autocomplete="off">
<span id="chanceerror" class="errortext">That is not a valid chance.</span>
</span>
<br>
<h3 id="payout">Payout: Loading...</h3>
<script>var username = <?php echo json_encode($_SESSION['username']); ?>;</script>
<script>var hash = <?php echo json_encode($_SESSION['hash']); ?>;</script>
<button type="button" id="dicebutton" onclick="prepareRoll(username, hash);" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>
<button type="button" id="autobet" onclick="setAutoBet(true)"><i class="fa fa-rocket" aria-hidden="true"></i> Autobet</button>
<div class="autobet-mode" id="autobet-mode">
<h3 id="auto-bet-start-text">Please set your auto bet settings, then click 'Start rolling'!".</h3>
<button type="button" id="start-autobet" onclick="startAutoBet()">Start rolling!</button>
</div>
</div>
<div class="balance">
<h3 id="balance">Balance: Loading...</h3>
</div>
</div>
<?php echo $script; ?>
</body>
UPDATE:
Reducing the .balance width to 40% fixed the issue, but how can I now force it up?
Try this code
add box-sizing: border-box; property to both the classes.
CSS
.gamebox, .balance{
box-sizing: border-box;
}
hope this helps..
you are looking for below structure,
what happens here is when you apply fixed width to div and them apply padding and margin so your element width gets increased
so better you create another child container and assign padding margin over there
.gamebox, .balance{
width: 50%;
float: left;
height: 100px;
}
.gamebox-inner, .balance-inner{
border: 1px solid red;
padding: 10px;
margin: 10px;
background-color: #ddd;
}
<div class="gamebox">
<div class="gamebox-inner">
a
</div>
</div>
<div class="balance">
<div class="balance-inner">
b
</div>
</div>
You can try flexbox as follows.
<div id="container">
<div class ="first">first</div>
<div class="second">second</div>
</div>
#container {
width: 200px;
height: 300px;enter code here
border: 1px solid black;
backgroud-color:red;
display:flex;
}
.first {
background-color:blue;
width:50px;
height:50px;
flex:1;
}
.second {
background-color:green;
width:50px;
height:50px;
flex:2;
}
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
I'm trying to get 2 divs to appear side by side in their parent and to both vertically fill the parent. I've tried setting height and min-height to 100% but I don't understand why its not working.
Here is my html:
<div class="calc-wrap clear">
<h2>Title</h2>
<div class="calc-content clear">
<div class="calc-form">
<form id="cost_calculator">
<fieldset>
<legend>
<h3>Find out how much your stuff costs you</h3>
</legend>
<ol>
<li class="one">
<label for="cost_of_pack">quantity</label>
<span class="pound-label">£</span>
<input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
</li>
<li class="two">
<label for="quantity_smoked">How many per day?</label>
<input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
</li>
</ol>
</fieldset>
</form>
</div>
<div class="calc-save">
<div class="calc-results-content clear">
<h3>Results</h3>
<div class="calc-results">
<div>
<p id="weekly_cost">£<span>0.00</span> per week</p>
<p id="monthly_cost">£<span>0.00</span> per month</p>
<p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
</div>
</div>
<div class="calc-quitnow">
<p>Well done</p>
</div>
</div>
</div>
</div>
</div>
And CSS:
.calc-content {
display: inline-block;
border: 3px solid blue;
width: 100%;
border-color: #87B7CD;
}
.calc-form,
.calc-save {
height:100%;
border: 1px solid red;
float: left;
}
.calc-form {
width: 60%;
}
.calc-save {
width: 39%;
background-color: #87B7CD;
}
.calc-results {
float: left;
width: 60%;
}
And a JS Fiddle
Any help would be much appreciated.
You can use "the Flex powers"! ;)
.calc-content {
display: flex;
/*display: inline-block;*/
border: 3px solid blue;
width: 100%;
border-color: #87B7CD;
}
.calc-form,
.calc-save {
border: 1px solid red;
/*float: left;*/
}
.calc-form {
width: 60%;
}
.calc-save {
width: 39%;
background-color: #87B7CD;
}
.calc-results {
float: left;
width: 60%;
}
<div class="calc-wrap clear">
<h2>Title</h2>
<div class="calc-content clear">
<div class="calc-form">
<form id="cost_calculator">
<fieldset>
<legend>
<h3>Find out how much your stuff costs you</h3>
</legend>
<ol>
<li class="one">
<label for="cost_of_pack">quantity</label>
<span class="pound-label">£</span>
<input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
</li>
<li class="two">
<label for="quantity_smoked">How many per day?</label>
<input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
</li>
</ol>
</fieldset>
</form>
</div>
<div class="calc-save">
<div class="calc-results-content clear">
<h3>Results</h3>
<div class="calc-results">
<div>
<p id="weekly_cost">£<span>0.00</span> per week</p>
<p id="monthly_cost">£<span>0.00</span> per month</p>
<p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
</div>
</div>
<div class="calc-quitnow">
<p>Well done</p>
</div>
</div>
</div>
</div>
</div>
This is because the parent <div> has no defined height, so obviously, the children elements can't fill 100% of the parents' height.
Add a height to your parent's class calc-content, e.g. height: 200px;.
calc-content {
display: inline-block;
border: 3px solid blue;
width: 100%;
height: 200px;
border-color: #87B7CD;
}
One way is to use display: flex or display: inline-flex in your .calc-content rule.
Use display: flex on calc-content and keep the form element inside the fieldset element like shown below. Also need for float left now.
.calc-content {
display: flex;
border: 3px solid blue;
width: 100%;
border-color: #87B7CD;
}
.calc-form,
.calc-save {
height: 100%;
border: 1px solid red;
}
.calc-form {
width: 60%;
}
fieldset {
width: 60%;
}
.calc-save {
width: 40%;
background-color: #87B7CD;
}
.calc-results {
float: left;
width: 60%;
}
<div class="calc-wrap clear">
<h2>Title</h2>
<div class="calc-content ">
<fieldset>
<legend>
<h3>Find out how much your stuff costs you</h3>
</legend>
<form id="cost_calculator">
<ol>
<li class="one">
<label for="cost_of_pack">quantity</label>
<span class="pound-label">£</span>
<input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
</li>
<li class="two">
<label for="quantity_smoked">How many per day?</label>
<input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
</li>
</ol>
</form>
</fieldset>
<div class="calc-save">
<div class="calc-results-content clear">
<h3>Results</h3>
<div class="calc-results">
<div>
<p id="weekly_cost">£<span>0.00</span> per week</p>
<p id="monthly_cost">£<span>0.00</span> per month</p>
<p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
</div>
</div>
<div class="calc-quitnow">
<p>Well done</p>
</div>
</div>
</div>
</div>
</div>
Are you trying to do like this:
Removed height from .calc-form, .calc-save & modified .calc-content with
display: flex;
.calc-content {
display: flex;
border: 3px solid blue;
width: 100%;
border-color: #87B7CD;
}
.calc-form,
.calc-save {
border: 1px solid red;
float: left;
}
.calc-form {
width: 60%;
}
.calc-save {
width: 39%;
background-color: #87B7CD;
}
.calc-results {
float: left;
width: 60%;
}
<div class="calc-wrap clear">
<h2>Title</h2>
<div class="calc-content clear">
<div class="calc-form">
<form id="cost_calculator">
<fieldset>
<legend>
<h3>Find out how much your stuff costs you</h3>
</legend>
<ol>
<li class="one">
<label for="cost_of_pack">quantity</label>
<span class="pound-label">£</span>
<input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
</li>
<li class="two">
<label for="quantity_smoked">How many per day?</label>
<input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
</li>
</ol>
</fieldset>
</form>
</div>
<div class="calc-save">
<div class="calc-results-content clear">
<h3>Results</h3>
<div class="calc-results">
<div>
<p id="weekly_cost">£<span>0.00</span> per week</p>
<p id="monthly_cost">£<span>0.00</span> per month</p>
<p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
</div>
</div>
<div class="calc-quitnow">
<p>Well done</p>
</div>
</div>
</div>
</div>
</div>
.parentDiv {
height: 250px;
background: black;
display:flex;
}
.childDiv {
width:50%;
background: grey;
padding:10px;
border:1px solid black
}
<div class="parentDiv">
<div class="childDiv">
text1
</div>
<div class="childDiv">
text2
</div>
</div>
I Currently am designing a login page in mvc and I want to seperate certain elements so they can be styled correctly. However when I create div's inside other divs they do not stick to the outer div's height and therefore move all around the page. I will give you a sample with my code.
In my Layout.cshtml page I've got
<div class="login-box-outer">
<div class="container">
<div class="login-box">
<div class="login-logo">
<a href="example" </b> Example</a>
</div>
#RenderBody()
</div>
</div>
</div>
In my register page I have the following
.form-control{
height: 35px;
}
.login-logo{
display: none;
}
.login-box, .register-box {
width: 500px;
margin: 2% auto;
}
.text-danger {
color: #a94442;
}
.login-page, .register-page {
background: url('https://example.jpg');
background-position: center;
background-size: cover;
}
##media(max-width: 400px)
{
.login-box, .register-box {
width: 300px;
margin: 4% auto;
}
}
.intl-tel-input{
display: block !important;
}
.join-section__shadow {
left:10%;
bottom:35%;
position: absolute;
padding: 96px 0 48px;
}
.join-content-layout {
background-color: transparent;
padding: 0;
max-width: 1110px;
margin: 0 auto;
position: relative;
color:white;
}
.join-xlarge {
font-size: 38px;
line-height: 44px;
font-weight: 800;
text-shadow: 0 0 3px rgba(0,0,0,.3);
}
.join-medium {
font-size: 24px;
margin-top: 10px;
font-weight: 500;
text-shadow: 0 0 1px rgba(0,0,0,.5);
}
.content-frame.purple2-bg {
background: #fff;
}
.container-fluid.support-block {
padding-top: 30px;
padding-bottom: 30px;
}
.support-block a {
text-decoration: none;
}
</style>
still in the register page here is my html
<div class="container-fluid support-block">
<div class="join-section__shadow">
<div class="join-content-layout">
<div class="col-md-12 col-sm-12">
<h1 class="join-xlarge join-headline join-h1">
Example
</h1>
<h3 class="join-medium join-h3">
Example
</h3>
</div>
</div>
</div>
<div class="col-xs-10 col-xs-push-10 noPadding" style="bottom:100px;">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="#ViewBag.ReturnUrl" method="post" role="form">
#Html.AntiForgeryToken()
<div class="box box-primary col-xs-12 boxShadow" style="border:none;margin-bottom:10px;">
<div class="form-group has-feedback col-xs-12 noPadding">
<label>Name</label>
<input asp-for="#Model.FullName" value="#Model.FullName" class="form-control" />
<span asp-validation-for="#Model.FullName" class="text-danger"></span>
</div>
</form>
</div>
</div>
<div class="container-fluid">
<div class="content-frame purple2-bg">
<div class="container-fluid support-block">
<div class="row icon-row">
<div class="col-md-4">
<i class="fa fa-tag" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-thumbs-up" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-money" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
</div>
</div>
</div>
</div>
However, under the form I want a complete new section but the content from the form and everything else seems to just float about on the page! Anybody know why this is happening?
Here is how it looks in the browser
This container should be taking up the full width of the screen but it's just floating around. Any idea as to why this is happening?
I'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without text-align:center it positions fine. Any way to fix it? Thanks for spending your time with my problem.
Here's the JSFiddle
And here is my code :
.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
.player_play{font-size:36px;vertical-align:middle}
.radio_name{vertical-align:middle}
.radio_icon{padding-right:5px;vertical-align:middle}
.radio_select{font-size:20px;vertical-align:middle}
<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
</div>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Anison</span>
</div>
<div class="float-right">
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
Using display: flex will make every element inside that container have the same horizontal size so this should solve your problem:
.container {
display: flex;
}
.float-left {
flex: 1;
}
.radio_volume {
text-align: center;
flex: 1;
}
.float-right {
flex: 1;
}
.float-right i {
float: right;
margin-top: 10px;
}
also here's the jsfiddle: https://jsfiddle.net/fqkvv8es/3/
You can make use of Bootstrap's classes, which results in less code than what the chosen answer uses:
JSFiddle
HTML
<nav class="player">
<div class="container">
<div class="row justify-content-between align-items-center">
<i class="fa fa-play-circle player_play action"></i>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Station</span>
</div>
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
CSS
.player {
padding: .75rem 1rem;
margin-bottom: 1rem;
line-height: 36px
}
.player_play {
font-size: 36px;
}
.radio_icon {
padding-right: 5px;
}
.radio_select {
font-size: 20px;
}
JSFiddle
I'm trying to learn responsive CSS but having difficulty with some basic css design. I've created a fixed navbar as you may be able to see in the code below. But the problem i'm facing is that i'm not able to properly align content below it. The content is getting overlapped by the navbar. Can you suggest an appropriate CSS fix and not a workaround like adding empty divs with fixed heights? Here is the code:
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> Home </li>
<li> How It Works </li>
<li> Features </li>
<li> Surveys </li>
<li> Plans and Pricings </li>
<li> Webinars </li>
<li> Blog </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>
`responsive.html`
The appropriate way is to add padding-top in your div, the same padding as the height of your fixed header.
I made a few changes to your responsive.css file and it worked out for me.
Here are the changes that I made:
in title-bar class
.title-bar{
position:fixed;
top: 0;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
I changed margin-top:0px; to top: 0;
Why? To Set the top edge of the fixed positioned navbar to 0 below the top edge of its nearest positioned ancestor as told here
and in the display-bar-1
.display-bar-1{
background-color: deepskyblue;
height: 200px;
margin-top: 100px;
padding:40px;
position: relative;
}
I added margin-top: 100px;
Why? Your navbar had a height of 100px. So i gave a margin top of 100px to your display-bar-1 class.
Hope this resolves your issue.
Your navbar has a height of 100px. So you need to start with your divs 100px below.
Add to the first div after the navbar this:
style="top:100px;"
Then it should work. It would look like this:
<div class="display-bar-1" style="top:100px;">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
Other ways would be to create an own css class for the first div after the navbar. Then you could also work with
padding-top:100px;
or
margin-top:100px;
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> Home </li>
<li> How It Works </li>
<li> Features </li>
<li> Surveys </li>
<li> Plans and Pricings </li>
<li> Webinars </li>
<li> Blog </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1" style="top:100px;">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>
I have a web page and I am trying to use a bootstrap carousel. On the first slide there are 3 pictures and on the other slide there is a youtube video embedded to it. The page looks problematic on smaller resolutions.
Here is a how pictures look like on laptop:
pictures on laptop
Here is how youtube video looks like on laptop:
video on laptop
Here is how pictures look like on smaller resolution:
pictures on 320x480
Here is video on smaller resolution:
video on 320x480
Here is video on 360x640:
video on 360x640
Is there a way to make pictures on carousel display on the center when it is smaller resoultion? And of course for the youtube video as well. The video is not on the center and exceeds the screen.
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="row item active">
<div class="bannerImage">
<a href="#"><img src="images/waspmote_pro_t.png" alt="">
</a>
<a href="#"><img src="images/waspmote_exp_radio_board_2-375_t.png" alt="">
</a>
<a href="#"><img src="images/u13_gw_t.png" alt="">
</a>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote</h3>
</div>
<div class="row">
<div class="col-md-4">
<ul style="list-style-type: none;">
<li><i class="fa fa-share-alt"></i> Connect any sensor</li>
<li><i class="fa fa-rss"></i> Using any wireless technology</li>
<li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmote">
<li><i class="fa fa-check-circle"></i> Ultra low power (0.7uA)</li>
<li><i class="fa fa-check-circle"></i> 100+ Sensors available</li>
<li><i class="fa fa-check-circle"></i> Over the Air Programming (OTA)</li>
<li><i class="fa fa-check-circle"></i> Encryption Libraries (AES, RSA)</li>
<li><i class="fa fa-check-circle"></i> Encapsulated line available</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmote">
<li><i class="fa fa-check-circle"></i> Industrial Protocolos: RS-232,RS-485,Modbus,CAN Bus, 4-20mA</li>
<li><i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Slide1 -->
<div class="row item">
<div class="bannerImage">
<a href="#"><img src="images/waspmoteps01.png" alt="">
</a>
<a href="#"><img src="images/waspmoteps02.png" alt="">
</a>
<a href="#"><img src="images/waspmote03.png" alt="" class="righter">
</a>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Plug & Sense</h3>
</div>
<div class="row">
<div class="col-md-4">
<ul style="list-style-type: none;">
<li><i class="fa fa-bolt"></i> Easy and fast deployment</li>
<li><i class="fa fa-money"></i> Minimum maintenance costs</li>
<li><i class="fa fa-exchange"></i> Services/network scalability</li>
<li><i class="fa fa-cloud"></i> Any Cloud platform compatible</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmoteps">
<li><i class="fa fa-check-circle"></i> Integrating more than 80 sensors</li>
<li><i class="fa fa-check-circle"></i> Robust waterproof IP65 enclosure</li>
<li><i class="fa fa-check-circle"></i> Add/change sensor probe in seconds</li>
<li><i class="fa fa-check-circle"></i> Solar powered internal and external panel</li>
</ul>
</div>
<div class="col-md-4">
<ul style="list-style-type: none;" class="waspmoteps">
<li><i class="fa fa-check-circle"></i> Over the air programming (OTAP)</li>
<li><i class="fa fa-check-circle"></i> Graphical/intuitive programming interface</li>
<li class="space"><i class="fa fa-check-circle"></i> ZigBee, 802.15.4, 868, 900, LoRaWAN, LoRa, Sigfox, WiFi, 3G/GPRS and Bluetooth Low Energy</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Slide2 -->
<div class="row item">
<div class="bannerImage">
<iframe width="480" height="270" src="https://www.youtube.com/embed/f1wXYGDvYAY?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Plug & Sense</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps">
<p>The new Waspmote Plug & Sense! line allows developers to forget about electronics and focus on services and applications. Now you can deploy wireless sensor networks in a easy and scalable way ensuring minimum maintenance costs. The new platform consists of a robust waterproof enclosure with specific external sockets to connect the sensors, the solar panel, the antenna and even the USB cable in order to reprogram the node. It has been specially designed to be scalable, easy to deploy and maintain.</p>
</div>
</div>
</div>
</div>
<!-- /Slide3 -->
<div class="row item">
<div class="bannerImage">
<iframe width="480" height="284" src="https://www.youtube.com/embed/GRMMS8nOdwc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="caption row">
<div class="col-md-12">
<h3>Waspmote Events Sensor Board</h3>
</div>
<div class="row">
<div class="col-md-12 waspmoteps">
<p>More than 50 available sensors for the Waspmote platform. Values from the temperature, humidity, tilt, vibration, water, PIR, bend sensors integrated in the Events Sensor Board are sent using the 802.15.4/ZigBee radio.</p>
</div>
</div>
</div>
</div>
<!-- /Slide4 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div>
<!-- /.control-box -->
</div>
<!-- /#myCarousel -->
</div>
<!-- /.span12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
CSS
div {
word-break: break-all;
}
img {
max-width: 100%;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 8 */
filter: alpha(opacity=50);
/* IE7 */
opacity: 0.6;
text-decoration: none;
}
/* Container */
.container-fluid {
background: #fbf4e0;
margin: 40px auto 10px;
padding: 20px 0px;
max-width: 960px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #000;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #000;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 10px 0px;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.caption .span4,
.caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #000;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
font-weight:bold;
}
.caption p {
font-size: 1rem;
line-height: 1rem;
color: #000;
}
.caption ul{
color: #000;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer,
.footer a {
color: #fff;
}
p.right {
float: right;
}
::selection {
background: #ff5e99;
color: #FFFFFF;
text-shadow: 0;
}
::-moz-selection {
background: #ff5e99;
color: #FFFFFF;
}
a,
a:focus,
a:active,
a:hover,
object,
embed {
outline: none;
}
:-moz-any-link:focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
}
.bannerImage img {
margin-left: 10%;
}
.bannerImage iframe{
margin-left: 25%;
margin-right: 25%;
}
.waspmote{
font-size:13px;
}
.waspmoteps{
font-size:13px;
}
.space{
margin-bottom:34px;
}
.righter{
margin-left:18% !important;
}
edit 1: Here is what happened after media screen addedtexts under pictures are not display on the screen.
media screen
edit 2: Actually this markup works for pictures in the slide but still texts under the pictures are not visible in smaller resolutions.
<div class="bannerImage">
<div class="row productsRow">
<div class="col-md-4">
<img src="images/waspmoteps01.png" alt="">
</div>
<div class="col-md-4">
<img src="images/waspmoteps02.png" alt="">
</div>
<div class="col-md-4">
<img src="images/waspmote03.png" alt="" class="righter">
</div>
</div>
</div>
CSS:
.productsRow {
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
Edit 3: JSFiddle added:
JSFIDDLE
EdiT 4: After removing the height, the videos are not centered.
enter link description here
EdiT 5: Changing the iframe CSS worked for small resolutions. But for 768x1024 and 800x1280 portrait resolutions texts under pictures exceeds the screen.
part1: 768x1024_part1
part2: 768x1024_part2
Edit 6: The PC/Laptop resolution breaks.
sample
EdiT 7: Carousel starts on the main page automatically on IE 11 but supposed to be sliding on the active page!? Any ideas?
Here is the Jquery:
// Carousel Auto-Cycle
$(document).ready(function () {
$('.carousel').carousel({
interval: 6000
})
});
The solution is not perfect, but I hope it also helps you.
For your container .bannerImage I defined width:100%; than you can achieve the
responsiveness of your website.
#media queries: To set the size of the images to 100%, if the screen resolution is lower than 1024px.
CSS
.bannerImage img {
width: 25%;
}
.bannerImage{
padding-left: 15%;
padding-right: 15%;
width: 100%;
height: auto;
}
.bannerImage iframe{
width: 100%;
}
#media screen and (max-width: 1024px){
.bannerImage img {
width: 100%;
}
}
jsfiddle
EDIT 1
Remove the height: 140px; on line 1430, after than your text will be shown in full height.
EDIT 2 UPDATE
So there was still an issue with the iframe pic, but this should fix it:
CSS
.bannerImage iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:80%;
height:100%;
}
.iframeImage{
position:relative;
padding-bottom:44.25%;
height:0;
left: -15%; //for centering the iframe
}
HTML
<div class="bannerImage iframeImage">
...
</div>
Have you tried img-responsive class for images and embed-responsive class for video content? these are classes for responsive media content
Check this for images and this for video content