I am writing a basic website for a friend, who makes short films and wants to have a site to present his work.
I have a very easy question but sadly can't find a good (or at least understandable for me) answer for it.
I have a site with 5 pictures in a row, each picture is a short film.
Now I want to make sth. to show the "movie details" like this
Since I am not a "pro" I was thinking to use a modal or popover, but I'm struggling trying to customize the layout in both.
So my questions are
Can I customize the layout of modals & popovers, not only colors etc?
Should I use one before the other? It appears to me that modals are "better" if targeting mobile phones, since popovers normally react to hover actions (not possible in many mobiles)
Here my "testing" CodePend https://codepen.io/rgomez/pen/opvyNq
/* HEADER CSS*/
#font-face {
font-family: 'CoffeeTin';
src: url('../fonts/CoffeeTinInitials.eot');
src: url('../fonts/CoffeeTinInitials.eot?#iefix') format('embedded-opentype'), url('../fonts/CoffeeTinInitials.woff') format('woff'), url('../fonts/CoffeeTinInitials.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#myHeader .navbar {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: black !important;
}
#myHeader .navbar-brand:hover {
color: red !important;
}
#myHeader .active {
font-size: 120%
}
#navbarHome .nav-link {
font-size: 150%;
font-family: 'CoffeeTin';
color: red
}
/* BODY CSS*/
.tooltip>.tooltip-inner {
background-color: #f00;
max-width: 1000px
}
.tooltip>.tooltip-arrow {
border-bottom-color: #f00;
}
.tooltip {
width: 100%
}
html,
body {
width: 100%;
height: 100%
}
#movies {
margin-top: 4rem;
margin-bottom: 4rem
}
#movies img {
transition: all .3s ease-in-out;
}
#movies img:hover {
transform: scale(1.5)
}
/*Footer CSS*/
#myFooter {
background-color: #000000;
color: white;
}
#myFooter h5 {
font-size: 18px;
color: white;
font-weight: bold;
margin-top: 30px;
}
#myFooter a {
color: #ffffff;
text-decoration: none;
}
#myFooter a:hover,
#myFooter a:focus {
color: rgb(250, 4, 4);
}
#myFooter .social-networks {
text-align: center;
padding-top: 30px;
padding-bottom: 16px;
}
#myFooter .social-networks a {
font-size: 32px;
color: #f9f9f9;
padding: 10px;
transition: 0.2s;
}
#myFooter .contact:hover {
color: #ffffff;
background-color: #ef1a1a
}
#myFooter .facebook:hover {
color: #0077e2;
}
#myFooter .google:hover {
color: #ef1a1a;
}
#myFooter .twitter:hover {
color: #00aced;
}
#myFooter .btn {
color: rgb(0, 0, 0);
background-color: #ffffff;
border-radius: 10px;
border: 0px;
width: 10rem;
margin: 0 auto;
margin-top: .5rem;
margin-bottom: 1.5rem;
text-align: center;
display: block;
line-height: 25px;
}
<html lang="es">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108836206-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-108836206-1");
</script>
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href<!DOCTYPE html>
<html lang="es">
<head>
<!-- Include Global site tag (gtag.js) - Google Analytics -->
<title>Panoja Films - Guillermo Paniagua</title>
<link rel="shortcut icon" href="assets/icons/favicon.ico" type="image/x-icon">
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta name="keywords" content="film,director,pelicula,guillermo,paniagua,panoja">
<meta name="description" content="Guillermo Paniagua - Film Director Personal-Site - PanojaFilms 2017">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Panoja Films">
<meta property="og:url" content="{{pageUrl}}">
<meta property="og:image" content="{{imageUrl}}">
<meta property="og:description" content="{{description}}">
<meta property="og:title" content="{{pageTitle}}">
<meta property="og:site_name" content="{{siteTitle}}">
<meta property="og:see_also" content="{{homepageUrl}}">
<!-- Include the CSS -->
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="assets/css/body.css">
<link rel="stylesheet" href="assets/css/header.css">
<!-- Include jQuery (required) and the JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
</script>
</head>
<body style="background-color: black">
<header id="myHeader">
<a href="index.html">
<div id="logoHeader" class=" jumbotron-fluid img-fluid" href="#logoHeader" href="index.html" style="background: url(assets/img/logo-banner.jpg); background-size: 100% 100%; height: 15rem"></div>
</a>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHome" aria-controls="navbarsExampleDefault">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHome">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="cortometrajes.html">Cortometrajes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="guiones.html">Guiones</a>
</li>
<li class="nav-item">
<a class="nav-link" href="fotografia.html">Fotografia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Sobre Mi</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid" id="movies">
<div class="row">
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" data-toggle="modal" data-target="#myModal" data-placement="auto" data-trigger="click">
<p style="color: white">With Modal Test</p>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Carousel -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
</div>
</div>
<footer id="myFooter" class="">
<div class="container-fluid">
<div class="row">
<div class="col social-networks">
<h5>Youtube</h5>
<a href="https://www.youtube.com/user/panojas90" target="_blank" class="google">
<i class="fa fa-youtube"></i>
</a>
</div>
<div class="col social-networks">
<h5>Facebook</h5>
<a href="#" class="facebook">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col social-networks">
<h5>Twitter</h5>
<a href="#" class="twitter">
<i class="fa fa-twitter"></i>
</a>
</div>
</div>
<div class="row">
<a class="btn btn-light contact text-center" href="mailto:" role="button">Contáctame</a>
</div>
<div class="footer-copyright text-center mt-5">
<p>© 2017 Copyright
PanojaFilms - All Rights Reserved. </p>
</div>
</div>
</footer>
</body>
Related
Below is the HTML and the CSS (used Bootstrap 5) for my home page layout. I have trouble filling the remaining space with the carousel and making the "Welcome" text along with the paragraph sit on top of the carousel.
If I give the carousel "vh-100" it will fill the rest of the space. But it would then push the footer out of the screen putting a vertical scroll bar. My aim is to show everything in the same view without adding a vertical scroll bar.
Hope somebody can help me what I'm trying to achieve.
#font-face {
font-family: "seaford";
src: url(../fonts/SeafordRg.ttf);
}
html {
position: relative;
min-height: 100%;
font-size: 14px;
font-family: seaford, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
body {
margin-bottom: 60px;
font-family: seaford, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
/*css - for custom elements*/
.bg-join-newsletter {
background-color: #cbcbcb !important;
}
.carousel-item {
width: 100vw;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
opacity: 0.4 !important;
}
.item-1 {
background: url(../images/img1.jpg) no-repeat center center fixed;
}
.item-2 {
background: url(../images/img2.jpg) no-repeat center center fixed;
}
.item-3 {
background: url(../images/img3.jpg) no-repeat center center fixed;
}
/* media rules */
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - GCT.Web</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-dark border-bottom box-shadow">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">GCT.Web</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid carousel slide carousel-fade p-0 m-0 d-flex align-items-stretch" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner m-0 p-0">
<div class="carousel-item active item-1 h-100">
<div class="carousel-caption">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item item-2 h-100">
<div class="carousel-caption">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item item-3 h-100">
<div class="carousel-caption">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top footer text-muted bg-dark">
<div class="container-fluid bg-join-newsletter">
<div class="container d-flex justify-content-center">
<form class="row align-items-center w-75">
<div class="col-auto text-black">
<label>Join our news letter</label>
</div>
<div class="col-4">
<label class="visually-hidden" for="subscribeEmail">Username</label>
<div class="input-group">
<input id="subscribeEmail" type="email" class="form-control" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="basic-addon2">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="subscribeName">Name</label>
<input type="text" class="form-control" id="subscribeName" placeholder="Enter your name">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="container">
© 2022 - GCT.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
I'm working on a little gallery and I just figured out how to use Salvattore (similar to Masonry). The problem I'm having is that when I shrink the web page down, padding is still 10px and I want it to be 5px instead so that all 3 columns are still visible and the padding still seems to look nice (Sort of like Pinterest). I tried a media query but it's not working. Here's my HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="salvattore.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Things Pink!</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true">PINKI</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
<p>Random beautiful images of my favorite color.. pink!</p>
</div>
<div id="grid" data-columns>
<div class="column size-1of3">
<div>
<img src="https://images.unsplash.com/photo-1496193574520-069d8f5c945e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1518691340140-512e66ce957b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1488953994029-e6a7ba3348f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1495464205000-94ffda5a0064?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1504898770365-14faca6a7320?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1470165451736-166cb1cc909d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1429152937938-07b5f2828cdd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1445098693232-134135a7ccfa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
</div>
<div class="column size-1of3">
<div>
<img src="https://images.unsplash.com/photo-1488895892452-8df3dbc55c68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1461439626172-c3b891456f2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1292&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1533008093099-e2681382639a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1472850156196-0156e307c552?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1453070516881-ae11f3f6b1b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1519717993199-3b3da2425d64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1517148627138-c9728d76331c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
</div>
<div class="column size-1of3">
<div>
<img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1498588113594-33ad5b4d19b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1496372412473-e8548ffd82bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1475&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1490395930356-7e64acf16e23?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1479912649391-55173fe33de4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1516826049371-1e7856387270?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1514542996715-a1ff9ccfb039?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="salvattore.js"></script>
</body>
body {
padding-top: 70px;
}
.jumbotron {
color: rgb(255, 159, 146);
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
background-color: #FFF;
}
.jumbotron p {
letter-spacing: 4px;
}
.navbar-inverse {
background-color: #f06464;
border-color: #666;
}
.navbar-inverse .navbar-brand {
color: #FFF;
}
.navbar-inverse .navbar-nav>li>a {
color: #FFF;
}
#grid[data-columns]::before {
content: 3 .column.size-1of3;
}
.column {
float: left;
}
.size-1of3 {
width: 33.333%;
}
img {
max-width: 100%;
padding: 10px;
}
#media (max-width: 450px;) {
img {
padding: 5px;
}
}
Looks like your #media tag is not properly formed. Try this "#media only screen and" in place of your "#media" and check this out https://www.w3schools.com/cssref/css3_pr_mediaquery.asp . Hope this hel
body {
padding-top: 70px;
}
.jumbotron {
color: rgb(255, 159, 146);
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
background-color: #FFF;
}
.jumbotron p {
letter-spacing: 4px;
}
.navbar-inverse {
background-color: #f06464;
border-color: #666;
}
.navbar-inverse .navbar-brand {
color: #FFF;
}
.navbar-inverse .navbar-nav>li>a {
color: #FFF;
}
#grid[data-columns]::before {
content: 3 .column.size-1of3;
}
.column {
float: left;
}
.size-1of3 {
width: 33.333%;
}
img {
max-width: 100%;
padding: 10px;
}
#media all and (max-width: 450px) {
img {
padding: 5px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="salvattore.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Things Pink!</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true">PINKI</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
<p>Random beautiful images of my favorite color.. pink!</p>
</div>
<div id="grid" data-columns>
<div class="column size-1of3">
<div>
<img src="https://images.unsplash.com/photo-1496193574520-069d8f5c945e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1518691340140-512e66ce957b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1488953994029-e6a7ba3348f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1495464205000-94ffda5a0064?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1504898770365-14faca6a7320?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1470165451736-166cb1cc909d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1429152937938-07b5f2828cdd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1445098693232-134135a7ccfa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
</div>
<div class="column size-1of3">
<div>
<img src="https://images.unsplash.com/photo-1488895892452-8df3dbc55c68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1461439626172-c3b891456f2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1292&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1533008093099-e2681382639a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1472850156196-0156e307c552?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1453070516881-ae11f3f6b1b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1519717993199-3b3da2425d64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1517148627138-c9728d76331c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
</div>
<div class="column size-1of3">
<div>
<img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1498588113594-33ad5b4d19b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1496372412473-e8548ffd82bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1475&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1490395930356-7e64acf16e23?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1479912649391-55173fe33de4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
<div>
<img src="https://images.unsplash.com/photo-1516826049371-1e7856387270?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div>
<img src="https://images.unsplash.com/photo-1514542996715-a1ff9ccfb039?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="salvattore.js"></script>
</body>
i am trying to create a responsive web site but i am stuck in one place that the images with a background-imaged mask are not functioning properly. It works fine with larger screens but in medium and small screens my headline and some of the images are not seen with the "masked" background image. So could you tell me where i am making the mistake? Is it coding or the method that i am doing wrong?
The pictures that how display the screen are at the bottom of this page.You can see in large screen there is no problem but in other screens you cant see the headline and only half of the images are shown and the background doesnt stretch to cover all images and headline!!!
enter link description here This is the website.You can see better what the problem is.
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!--Menü scroll change color-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navbar").css("background", "black");
}
else{
$(".navbar").css("background", "transparent");
}
})
})
</script>
<!--Menü scroll change color-->
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family:Arial;
}
.navbar-brand{
font-family: Gabriola;
font-size:35px;
padding-top:10px;
}
.navbar-nav li a {
color:white !important;
font-family: 'Kristen ITC';
}
.fixed-top .navbar-nav li a:hover {
color: red !important;
}
.fixed-top .navbar-nav li a:focus {
color: red !important;
}
.fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
.fixed-top.scrolled .navbar-nav li a {
color:red !important;
}
.fixed-top.scrolled .navbar-nav li a:hover {
color: red !important;
}
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.my-float{
margin-top:16px;
}
<!DOCTYPE html>
<html lang="tr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Avrupa Hayalleri - Avrupa'yı Görme Hayalleriniz Gerçek Olsun</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/ihover.css" >
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top ">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand red-text" href="#">BATU PARFÜM</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Anasayfa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bayan Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Erkek Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unisex Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
<!-- Links -->
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons ">
<li class="nav-item">
<!-- <a class="nav-link"><i class="fa fa-whatsapp fa-2x green-text "></i>0533 645 89 42</a> -->
<a class="nav-link" href="https://api.whatsapp.com/send?phone=905382392398"><i class="fa fa-whatsapp fa-2x green-text "> </i>0538 239 23 98 </a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div id="intro" class="view hm-black-strong container-fluid ">
<div class="container-fluid full-bg-img d-flex align-items-center justify-content-center ">
<div class="row container-fluid d-flex align-items-center justify-content-center">
<div class=" col-lg-8 col-md-8 col-sm-8 text-center ">
<hr class="hr-light ">
<!-- Heading -->
<h1 class=" font-bold mb-2 white-text">Kokunu Keşfet</h1>
<!-- Divider -->
<hr class="hr-light pt-2 ">
</div>
<!--Grid row-->
<div class="row col-lg-8 col-md-8 col-sm-8 container-fluid text-center mt-5">
<!-- Top to Bottom-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4 ">
<h2 class="mb-4 font-weight-bold white-text ">Unisex Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/perfume1.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Bayan Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/f484004e6a670c4a5827535756317ba7a.jpg" class="img-fluid" alt="" style="border:3px solid white; " >
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Erkek Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/e9feb436d5ed39c882d93ac8fc207e82a.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--Main Navigation-->
</body>
</html>
small screen
medium screen
large screen
you can use media queries for smaller screens. Try this css for mobile phones:
header{
height: auto;
}
#intro{
padding: 0;
height: auto;
}
.full-bg-img{
position: relative;
}
Whenever user decreases the window size the text changes according to the window size. But when I decrease the window size it goes over to the image. I tried media queries but It always shows the same. I used the VW and vh to resize according to the window size.
I am getting like this. How to solve that error. The media query I used is
#media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
How to solve that .
My code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>deyaPay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Passion One' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Palanquin Dark' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=Fira Sans Extra Condensed' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
}
.carousel-control.right, .carousel-control.left {
background-image:none;
color: #32CD32;
}
.carousel-indicators li {
border-color: #000000;
}
.carousel-indicators li.active {
background-color: #32CD32;
}
.button {
background-color:#000000;
border:black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
/*.text {
font-size: 160%;
position: absolute;
display: inline-block;
left: 50%;
top: 180%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}*/
.button1 {
border: 1px solid black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
#media screen and (max-width: 803px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
img {
width:100%,
height:auto;
}
.col-sm-8 {
padding: 60px 50px;
}
#media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
/*#media screen and (max-width: 500px) {
.text {
font-size: 70px;
}*/
/*#media screen and (max-width:760em) {
.img {
font-size: 150px;
}*/
#media screen and (max-width: 803em) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style = "background:#FFFFFF">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <img src="Assets/img/deyapayiconandroid#3x.png" alt="logo" style="width:60px;"><br> -->
<h1 style = "font-family:Passion One;color:#3393E7;">deyaPay</h1>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li> Login</li>
</ul>
</div>
</div>
</nav>
<div class = "container-fluid" style = "background:#FFFFFF ">
<div class = "row">
<div class="col-sm-8">
<h2 style="margin-top: 100px; margin-left:50px;font-family:Palanquin Dark; font-size:55px" >
Pay for it anyway you want</br>
with deyaPay </h2>
<button type = "button" style = "background-color:#4CAF50; font-size:20px;width:200px;height:40px;margin-left:50px;margin-top:20px;text-align=center;color:white;border:none;display:inline-block"> Get Started </button>
</div>
<div class="col-sm-4">
<img src="Assets/img/deywalletbg.png" class="img-responsive" width="300" height="250" style=" margin-top: 150px">
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-color: #F2F2F2">
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-4">
<img src="Assets/img/first.png" class="img-responsive" width="300" height="250" style=" margin-left:180px;margin-top: 40px;">
</div>
<div class="col-sm-8">
<h2 class = "text" style = " font-family: 'Fira Sans Extra Condensed';font-size:3vw;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<div class="item" style="background-color: #F2F2F2">
<div class="row">
<div class="col-sm-4">
<img src="Assets/img/slide2.png" class="img-responsive" width="450" height="250" style=" margin-left:100px;margin-top: 40px;">
</div>
<div class = "col-sm-8">
<h2 style = " font-family: 'Fira Sans Extra Condensed';font-size:35px;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid" style="background-color:#F0F8FF ">
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" class = "img-circle" alt="Paris" width="180">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="New York" width="180">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="San Francisco" width="180">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
</div>
The image is overlapped because it has a margin to the left as inline style. You could remove that inline style and use a media query to overwrite that. Take care that your text also has inline style which might cause problems, as you wont be able to overwrite it with media query.
Additionally, your second slide doesn't has the .text class on it, if you wonder that only one slides text changes.
I am using twitter bootstrap in Bonfire. I am trying to have a footer at the bottom page if there is less content, and if there is more content, the footer goes towards the end.
I have been trying for hours, and not able to find out what I am missing. I checked examples and codes available, but not able to find out what is different, or missing.
Would really appreciate if anyone could point out what is missed here.
<!doctype html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/assets/css/bootstrap-responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/footer_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/jumbotron.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/default/screen.css" media="screen" />
<link rel="shortcut icon" href="http://localhost/bonfire/public/favicon.ico">
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brokerage Free - PAN Services </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
Apply for PAN <b class="caret"></b>
<ul class="dropdown-menu">
<li >New PAN Application</li>
<li class="divider"></li>
<li>Replacement PAN Application</li>
<li class="divider"></li>
<li>Correction PAN Application</li>
</ul>
</li>
<li >FAQ</li>
<li>Track Application Status</li>
<li>Contact Us</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class = "container">
<h1> Privacy Policy </h1>
We are a financial Services Company, offering a wide variety of Financial Services.
</div><div class="push"></div>
<footer>
<div class="container">
<div class="span12">
<div clas="row">
<div class="span2 offset1">About US</div>
<div class="span2 ">Privacy Policy</div>
<div class="span2 ">Terms of Use</div>
<div class="span2 ">Contact Us</div>
</div>
<div class="push"></div>
</div>
<div class="row">
<p align="center">© Brokerage Free 2014. - All rights reserved.
</div>
</div>
</footer>
</div>
The footer_style.css is given below:
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: 150px;
position: relative;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
text-decoration: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -250px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
padding-bottom: 60px;
}
#main {
overflow:auto;
padding-bottom:250px; /* this needs to be bigger than footer height*/
}
.container .credit {
margin: 20px 0;
}
</style>
This problem is a CSS problem and had nothing to do with Bonfire. I am posting this solution so if someone has a similar problem in the future, might benefit out of this.
The following link helped me with finding a solution:
http://css-tricks.com/snippets/css/sticky-footer/
The way to go about fixing this issue was to have a wrapper div, and a footer div that is outside of the wrapper div. The link has details.
Best.