I am facing a problem with the image size and position when resizing to mobile view in the browser.
.extension {
display: table;
padding: 50 px 0 px 50 px;
width: 100 % ;
height: auto;
color: #fff;
background-color: #558C89;
background-size: cover;
font-size: 22px;
font-weight: 200;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
# extension img {
width: 350 px;
height: 275 px;
position: absolute;
}
footer {
padding: 50 px 0;
height: auto;
}
<section id="extension" class="extension">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-8">
<h1>Download Our Extension</h1>
<p>extension
</p>
Download Extension
</div>
<div class="col-6 col-md-4">
<img src="img/iMacricket.png">
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Footer -->
<footer id="contact">
<div class="container">
<div class="row">
<div class="span9">
<div class="title-page">
<h2 class="title">Get in Touch</h2>
<hr class="small">
<h3 class="title-description">We are continually<br/>
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-8">
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a id="contact-submit" class="btn btn-lg btn-dark" href="#">Send Your Email</a>
</p>
</form>
</div>
<div class="col-6 col-md-4 text-center">
<h2>Contact Us</h2>
<hr class="small">
<ul class="list-unstyled">
<li><i class="fa fa-envelope fa-fw"></i> test#gmail.com
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<i class="fa fa-facebook fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-twitter fa-fw fa-3x"></i>
</li>
</ul>
<hr class="small">
</div>
</div>
<br/>
<p class="text-muted">Copyright © 2017 - Designed &</p>
</div>
<a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>
I was trying to set the height:auto, and resize the image but without success.
Add class img to img attribute and add this style
<div class="col-6 col-md-4">
<div class="img">
<img src="img/iMacricket.png">
</div>
</div>
Style
.img{
width: 100%;
height: 200px;
}
.img img{
max-width: 100%;
max-height: 100%;
}
You have a specific width for the image. Consider changing the width property to max-width: 350px; and height to max-height: 275px; and replace width and height to 100% , which will be fluid for any device.
#extension img {
width: 100%;
max-width: 350px;
height: 100%;
max-height: 275px;
position: absolute;
}
Related
I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>
function addMessageToBody(chat)
{
var htmlSTR = "";
htmlSTR = "<p>another paragaraph</p>";
//htmlSTR += "<li class="left"><span class="username">Doruk</span>";
//alert(htmlSTR);
//$("#message-lists").html(main);
}
<body background="Orange.png">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/js/jquery.nicescroll.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white border-top-green">
<div class="panel-body chat">
<div class="row chat-wrapper">
<div class="col-md-4">
<div class="compose-area">
</div>
<div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 550px;">
<div class="chat-list-wrapper" style="overflow-y: auto; width: auto; height: 550px;">
<ul class="chat-list" id="olasimesajlar">
<li class="text-center">
Olası Mesajlar </li>
<li>Liste Numara 2 </li>
<li>Liste Numara 3 </li>
<li>Liste Numara 4</li>
<li>Liste Numara 5</li>
<li>Liste Numara 6</li>
<li>Liste Numara 7</li>
<li>Liste Numara 8</li>
<li>Liste Numara 9</li>
<li>Liste Numara 10</li>
<li>Liste Numara 11</li>
<li>Liste Numara 12</li>
<li>Liste Numara 13</li>
<li>Liste Numara 14</li>
</ul>
</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 478.639px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
</div>
</div>
<div class="col-md-8">
<div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 452px;">
<div class="message-list-wrapper" style="overflow: hidden; width: auto; height: 452px;">
<ul class="message-list" id="message-lists">
<li class="text-center">
<a href="javascript:void(0);" class="btn btn-default" >Load More Messages</a>
<!-- <button id="loadmoremessages" onclick="loadMoreMessages()">Load More Messages</button> -->
</li>
<li class="left">
<span class="username">Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 mins ago
</small>
<span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="Yanique Robinson">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div class="message well well-sm" id="mesajleft">
..........
</div>
<div class="clearfix"></div>
<div class="message well well-sm">
<p>.... .........</p>
</div>
</div>
</li>
<li class="right" id="rightside">
<span class="username">Rasim Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 secs ago
</small>
<span class="avatar tooltips" data-toggle="tooltip " data-placement="left" data-original-title="Kevin Mckoy">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div id="mesajright" class="message well well-sm">
Czczczczczczczczccz
</div>
</div>
</li>
</ul>
</div><div class="slimScrollBar" style="width: 7px; position: absolute; top: 265px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 187.092px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
<div class="compose-box">
<div class="row">
<div class="col-xs-12 mg-btm-10">
<textarea name="messageinput" id="btn-input" class="form-control input-sm" placeholder="Type your message here..."></textarea>
</div>
<div class="col-xs-4" id="deneme">
</div>
<div class="col-xs-12">
<button id="sendbutton" onclick="myFunction()" class="btn btn-green btn-sm pull-right">
<i class="fa fa-location-arrow"></i> Send
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have this HTML and JavaScript code. This is a kind of chat application. So every time when button pressed I want to add messages to screen. My css is complex so I want to do that as passing HTML code into it via JavaScript. LİKE
<li class="left">
<span class="username">Ozan</span>
<small class="timestamp">
<i class="fa fa-clock-o"></i>3 mins ago
</small>
<span class="avatar available tooltips" data-toggle="tooltip " data-placement="right" data-original-title="Yanique Robinson">
<img src="https://pbs.twimg.com/profile_images/597340997157298176/2XUqrs3R.jpg" alt="avatar" class="img-circle">
</span>
<div class="body">
<div class="message well well-sm" id="mesajleft">
..........
</div>
<div class="clearfix"></div>
<div class="message well well-sm">
<p>.... .........</p>
</div>
</div>
</li>
adding/append this HTML code via JavaScript dynamically to ul section.
How can I do that ?
You are using jQuery, so you can simply do it like
$("#message-lists").append(htmlSTR);
But if the html of your message rows (li-s) are big and difficult you should rather do it with JSON responses and build the message rows on client side with js (based on the received data). Also I would recommend using some javascript template engine like Mustache or Handlebars.
One option is to use innerHTML:
var element = document.getElementById('message-lists');
element.innerHTML = element.innerHTML + "<p>another paragaraph</p><li
class='left'><span class='username'>Doruk</span>";
Add an event listener for your button.
In your event handler function, append your htmlSTR. This gets run every time your button gets clicked.
As you seem to be using jQuery, you can do this:
$(function(){
var htmlSTR = "<li><p>another paragaraph</p></li>";
var $ul = $('#olasimesajlar');
var $button = $('#id_of_your_button');
$button.click(buttonClickHandler);
function buttonClickHandler(){
$ul.append(htmlSTR);
}
});
i want to show a form on a slider on medium and a large size screen it's working fine but on a small screen and extra small i am posting a screen shot
i want this
on extra-small screen my what to do go automatically downward as form height increase
but in this case they are overlapping
this is a small screen
this is extra small screen
#slider{
width:auto;
padding:0px;
}
#form {
width: 920px;
height:100%;
}
.panel{
background: rgba(255, 255, 255, 0.6);
box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;
}
<div id="slider" >
<div id="jssor_1"style="height:100%;width:100px;position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; ">
<!-- Loading Screen -->
<div class="">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00" style="display: none;">
<img data-u="image" src="images/madina.png" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="images/jeddah.png" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="images/accra.png" />
</div>
<a data-u="any" href="http://www.jssor.com" style="display:none">Full Width Slider</a>
</div>
</div>
<div id="form" class="container">
<div class="row" style="margin-top:5px;">
<div class=" col-lg-6 col-md-8 col-sm-10 col-xs-12">
<div class="panel panel-default" style="border-color:green" >
<div class="panel-heading" style="background-color:white" >
<h2 class="panel-title" style="color:forestgreen" >Search & Book <span class="glyphicon"><i class="glyphicon glyphicon-plane"></i></span></h2>
</div>
<div class="panel-body">
<form role="form" runat="server" class="">
<div class="row" style="margin-bottom:0px">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px;">
<div class="form-group">
<label style="font-size:13px;margin-left:5px">Name</label>
<input id="n" name="n" type="text" class="form-control input-sm" placeholder="Name" required="required" value="" runat="server"/>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px">
<div class="form-group">
<label style="font-size:13px;margin-left:5px">Email</label>
<input id="em" type="text" name="email" class="form-control input-sm" placeholder="email" value="" runat="server"/>
</div>
</div>
</div>
<div class="row" style="margin-top:0px">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px;">
<div class="form-group">
<label style="font-size:13px;margin-left:5px">Phone Number</label>
<input type="text" name="password" id="tel" class="form-control input-sm" placeholder="Phone Number" runat="server" />
</div>
</div>......
I think you want height: 100vh. Vh is relative to 1% of the height of the viewport, so it will fill the entire screen.
For more information about CSS units, you can go to w3schools.
https://www.w3schools.com/cssref/css_units.asp
Here is my homepage
I want to extend the height of my image to fit the whole screen. I know that I have to adjust the height attribute, I did that, and nothing seems to work.
CSS
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url('../img/hero-slider/boxfill2sm.jpg');
background-size: cover;
position: relative;
padding-top: 0;
height: auto;
}
Note: I tried height: auto;. It doesn't do anything.
HTML
<section class="hero">
<div class="container-fluid no-margin no-padding">
<div class="col-md-8 col-sm-12 col-xs-12 col-lg-8" id="hero-left">
<div>
<div class="row">
<div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 391px;"><div class="hero-slider" style="width: auto; position: relative;">
<div class="slide first-slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 50; display: block;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp fadeInDown">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.ED</h2>
<p>EFFECTIVE DIGITAL LEARNING</p>
<p>Tutti.ed is our educational software platform that empowers education companies to bring state-of-the-art digital learning products to market quickly.</p>
<a class="btn btn-primary" href="/tutti-ed">Learn More</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
<!-- <img class="iphone" src="img/hero-slider/iphone.png" width="649" height="400" alt="Coming Soon Page"/> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.DEV</h2>
<p>BY DEVELOPERS, FOR DEVELOPERS</p>
<p>Tutti.dev is our cloud application suite that enables software teams to work more effectively and efficiently. Get it together with Tutti!</p>
<a class="btn btn-primary" href="/tutti-dev">Learn more</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:70px;" class="text-left">WHY AVENIROS?</h2>
<p>Our team has been building content delivery platforms for over 20 years. We have experience with development from large scale LMS installations to mobile applications. We can offer full turn-key technical services for your content or help your technical team get to market on time.
</p>
<a class="btn btn-primary" href="#" data-scrollto="#about">About us</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<div class="video">
<!-- <img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/> -->
<!--
<img src="img/hero-slider/macbook.png" width="782" height="422" alt=""/>
<div class="vide-holder">
<iframe src="//player.vimeo.com/video/79036490?byline=0&portrait=0&color=ffeeac" width="720" height="405"></iframe>
</div>
-->
</div>
</div>
</div>
</div></div><div class="bx-controls bx-has-pager"><div class="bx-pager bx-default-pager"><div class="bx-pager-item">1</div><div class="bx-pager-item">2</div><div class="bx-pager-item">3</div></div></div></div>
</div>
</div>
</div>
<!--Hero Slider-->
<div class=" col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right" id="hero-right" style="height: 496px;">
<div>
<div>
<div class="animated fadeInLeft">
<h1>Learnosity</h1>
<p>Did you know we are partnered with learnosity?</p>
<p>To learn more click the button below..filler. </p>
<a class="btn btn-primary" href="#">Learnosity</a>
</div>
</div>
</div>
<!--Close Hero Slider-->
</div>
</div>
</section>
This should work
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
You need to determine screen height for that so its better to use JavaScript
which can be accessed with screen.height. Also if you are using jQuery, you can get this property with $( window ).height();
$(document).ready(function() {
h=$(window).height();
$('.hero').css({'height':h+'px'});
});
I have an image where if you click the image, it acts as a button and opens up an overlay window with a form. A user can submit a username and password and submit and it closes out the form. Here is what I have:
Form:
<div class="formbk" id="contact_form">
<section class="panel">
<header class="panel-heading">
Bank of America Account
</header>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 col-sm-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email or Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-danger">Link Account</button>
</div>
</div>
</form>
</div>
</section>
</div>
Button:
<li>
<a href="#Contact">
<INPUT type=image src="http://i.imgur.com/UhxJY84.png" style="height:auto;width:100%" />
</a>
</li>
JS:
$(function() {
$('select.styled').customSelect();
});
//form script open and close
$("a[href='#Contact']").click(function() {
strtBlackout();
return false;
});
$("a[href='#exit']").click(function() {
endBlackout();
return false;
});
//fade in and out the form
function strtBlackout() {
$(".formbk").css("display", "inline-block");
$('.formbk').animate({top: '20%', opacity:1}, 800);
$(".blackout").css("display", "block");
}
function endBlackout() {
$('.formbk').animate({top: '-70%', opacity:0}, 800);
$(".blackout").css("display", "none");
}
CSS:
.formbk {
background: #333;
color: #000;
opacity: 0;
position: fixed;
z-index: 5;
top: -50%;
margin-left: 30%;
display: block;
text-align: center;
}
.blackout {
background-color: #000;
opacity: .7;
filter: alpha(opacity=70);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4;
display: none;
cursor: pointer;
}
Ok! Sorry for all the code but I'm stumped. How do I center this form popup properly in the middle of the page, and make it a nice width and height so that it really looks seamless on the website.
Thanks for the help!
HTML:
<li>
<a href="#Contact">
<img src="http://i.imgur.com/UhxJY84.png" style="height:auto;width:100%">
</a>
</li>
<div class="formbk" id="contact_form">
<section class="panel">
<header class="panel-heading">
Bank of America Account
</header>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 col-sm-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email or Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-danger">Link Account</button>
</div>
</div>
</form>
</div>
</section>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.backout {
background-color:#000;
opacity:.7;
filter:alpha(opacity=70);
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:4;
display:none;
cursor:pointer;
}
.formbk {
margin: 0 auto;
left: 50%;
transform: translate(-50%, 0);
position: fixed;
background: #333;
color:#000;
opacity:0;
z-index:9999;
top:-50%;
display:block;
}
.panel {
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
text-align: center;
}