I'm modifying a Bootstrap template thats using #media(max-width) queries. The background images looks fine in desktop responsive view. But the image is cut off horizontally (left and right) for mobile responsive view as seen below. It looks like even when viewed in responsive design mode or on an iPhone, the desktop media query is still used.
The desktop media query being used for both desktop and mobile is
header.carousel {
height: 80%;
}
I tried changing the mobile media query with !important but it doesn't appear to force the use of this media query.
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 60%!important;
}
}
I can change the desktop media query height to a lower value that will look correctly on mobile, but then the desktop view will get chopped vertically (top and bottom).
Anyone have a solution?
The full code is below
/*!
* Start Bootstrap - Modern Business (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
/* Global Styles */
html,
body {
height: 100%;
}
body {
padding-top: 50px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/*.navbar-brand.img {
max-width: 100%;
max-height: 100%;
}*/
/*a.dropdown-toggle*/
.navbar-nav>li>a {
padding-top: 25px;
padding-bottom: 25px;
font-size: 16px;
}
/*.navbar-nav>li>a {
line-height: 35px;
}*/
/*a.dropdown-toggle {
font-size: 16px;
}*/
img.logo {
max-width: 100%;
max-height: 100%;
}
a.navbar-brand {
height: 70px;
/*line-height: 35px;*/
}
/*a.navbar-brand.title {
font-size: 20px;
}*/
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
/* Home Page Carousel */
header.carousel {
/*height: 50%;*/
height: 80%;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
/* 404 Page Styles */
.error-404 {
font-size: 100px;
}
/* Pricing Page Styles */
.price {
display: block;
font-size: 50px;
line-height: 50px;
}
.price sup {
top: -20px;
left: 2px;
font-size: 20px;
}
.period {
display: block;
font-style: italic;
}
/* Footer Styles */
footer {
margin: 50px 0;
}
/* Responsive Styles */
#media(max-width:991px) {
.customer-img,
.img-related {
margin-bottom: 30px;
}
}
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 60%!important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Modern Business - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<!--<link href="css/modern-business.css" rel="stylesheet">-->
<link href="styles/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<!--<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.html">Super Service Heating & Cooling</a>-->
<!--<img src="images/logo-small.png">-->
<!--<a class="navbar-brand" href="/"><img src="images/logo-small.png" class="logo"></a>-->
<!--<a class="navbar-brand title" href="/">Super Service Heating & Cooling</a>-->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<!--About-->
<!--About-->
<!--Air Conditioning-->
Air Conditioning <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Air Conditioning Repair
</li>
<li>
Air Conditioning Installation
</li>
</ul>
</li>
<li>
<!--Services-->
<!--Heating-->
Heating <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Heating Repair
</li>
<li>
Heating Installation
</li>
</ul>
</li>
<li>
<!--Services-->
<!--Heating-->
Ventilation <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Ventilation Repair
</li>
<li>
Ventilation Installation
</li>
</ul>
</li>
<li>
<!--Services-->
<!--Heating-->
Maintenance <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Check-Up
</li>
<li>
Tune-Up
</li>
<li>
Re-Condition
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>-->
<div class="fill" style="background-image:url('https://static.wixstatic.com/media/fe503bcecec148e98b8264560b170aa9.jpg/v1/fill/w_1265,h_525,al_c,q_85,usm_0.66_1.00_0.01/fe503bcecec148e98b8264560b170aa9.jpg');"></div>
<div class="carousel-caption">
<!--<h2>Caption 1</h2>-->
<h2>Heating</h2>
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>-->
<div class="fill" style="background-image:url('https://static.wixstatic.com/media/7aa29e_fe789a02d347491da0897a536f102e31~mv2_d_2800_1867_s_2.jpg/v1/fill/w_1265,h_515,al_c,q_85,usm_0.66_1.00_0.01/7aa29e_fe789a02d347491da0897a536f102e31~mv2_d_2800_1867_s_2.jpg');"></div>
<div class="carousel-caption">
<h2>Air Conditioning</h2>
</div>
</div>
<div class="item">
<!--<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>-->
<div class="fill" style="background-image:url('https://static.wixstatic.com/media/7aa29e_84f4f5aed8b241ec9a3b88b089f1313e~mv2_d_2800_1869_s_2.jpg/v1/fill/w_1265,h_527,al_c,q_85,usm_0.66_1.00_0.01/7aa29e_84f4f5aed8b241ec9a3b88b089f1313e~mv2_d_2800_1869_s_2.jpg');"></div>
<div class="carousel-caption">
<h2>Maintenance</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.3.7</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
Learn More
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i> Free & Open Source</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
Learn More
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-compass"></i> Easy to Use</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
Learn More
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Portfolio Heading</h2>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Features Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Modern Business Features</h2>
</div>
<div class="col-md-6">
<p>The Modern Business template by Start Bootstrap includes:</p>
<ul>
<li><strong>Bootstrap v3.3.7</strong>
</li>
<li>jQuery v1.11.1</li>
<li>Font Awesome v4.2.0</li>
<li>Working PHP contact form with validation</li>
<li>Unstyled page elements for easy customization</li>
<li>17 HTML pages</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.
</p>
</div>
<div class="col-md-6">
<img class="img-responsive" src="http://placehold.it/700x450" alt="">
</div>
</div>
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Company Name
<script>
document.write(new Date().getFullYear())
</script>
</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<!--<script src="js/jquery.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
your #media(max-width:767px) is wrong
#media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel { // header.carousel .fill is necessary
height: 60%!important;
}
}
I think this helps :) And note: if you adjust the height think then also to the wide
Try using vh instead of percents.
height: 80vh;
I made this pen, so you can see how to use vh unit: https://codepen.io/anon/pen/KqvxgE
vh - calculates height based on your viewport, so the layout should look the same on different viewports - screen resolutions.
More about units in css: https://www.w3schools.com/cssref/css_units.asp
Related
How can I add this icon from fontawesome and put it over this picture?
I want it to be aligned in the center of the picture.
<i class="fas fa-play-circle"></i>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex border-bottom mb-1 mt-3">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="#">
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
</body>
</html>
Problem is solved and responsive Design now is properly achieved.
You just update your CSS with the following Code
.img-box{
position: relative;
min-width: 100%;
height: 100%;
display: block;
}
.icon-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
min-height: 100%;
}
.icon-box i{
font-size: 29px;
color: #fff;
}
#media(max-width: 767px){
.main-box {
flex-direction: column;
align-items: center;
}
}
And update your HTML with following
<div class="d-flex border-bottom mb-1 mt-3 main-box">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li>
<a href="#" class="img-box">
<div class="icon-box">
<i class="fas fa-play-circle"></i>
</div>
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Abhijeet John Kujur.
</div>
I am trying to create a responsive cards set using bootstrap. The code of the cards is as follows:
<div class="col-xl-4 col-md-6 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="images/1.jpeg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
The extra css applied to this is:
.inner {
overflow:hidden;
}
.inner img {
transition: all 1.5s ease;
}
.inner img:hover{
transform:scale(1.5);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
What I am trying to achieve is, whenever hovered over image inside the card, it will scale up.
This works fine but whenever I go on reducing the window size, one card goes below the other.
I cannot understand why this is happening.
Card overlaps another card. so apply z-idex:1000. its work.
.card{
z-index: 1000;
}
.inner {
overflow: hidden;
}
.inner img {
transition: all 1.5s ease;
}
.inner img:hover {
transform: scale(1.5);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<div class="row">
<div class="col-xl-4 col-md-4 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQ6mhz8QnD2r1COMuWG4RZnrAzrgFwQHvC7QbIC3cSL6pbYUpL&usqp=CAU" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-4 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQ6mhz8QnD2r1COMuWG4RZnrAzrgFwQHvC7QbIC3cSL6pbYUpL&usqp=CAU" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- Learn more -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to use Bootstrap carousel in my website but I am not able to center the content in the carousel. I've tried using Grid but that didn't work out well. How can I solve this problem? Please take a look at my code and the image that has been provided below. I haven't used any CSS yet for the carousel.
<section class="services-about">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-columns">
<div class="card card-effects">
<img src="./resources/images/data.png" alt="" class="img-fluid card-img-top mx-5"
style="height: 10%; width: 15%;">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
WEB DEVELOPMENT
</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">Lorem
ipsu dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card-columns">
<div class="card card-effects">
<img src="" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h3 class="card-title text-center" style="color: #686868 !important;">
MARKETING</h3>
<hr style="border: .01px solid #333 !important;">
<p class="card-text text-center"
style="color: rgba(255,255,255,.755) !important;">
Lorem
ipsum dolor sit amet consectetur adipisicing
elit.
Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
unde
praesentium, quidem soluta incidunt enim dolore veritatis at quis
molestias
corporis
quod inventore porro!</p>
</div>
</div>
</div>
</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>
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</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>
</section>
Please check this image to see the carousel problem
You should be able to use position to do that.
If you add:
.carousel-item {
position: relative;
}
.card {
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%, 50%);
}
Your content should get centered in the middle of the slide. :)
Try the below one.. add style="margin:auto" to card
<div class="card" style="width:400px; margin:auto;">
<div class="carousel-caption">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
Since you are using bootstrap classes:
Trying using d-flex justify-content-center align-items-center on parent div element.
Also, I strongly suggest you stop using css inline styling and put your css into a separate file.
-> how to set column in responsive view this type of structure. i want one by one column i have attachment screenshot what i want in bootstrap 4 for ipad view. i want one column than second column.
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');[![enter image description here][1]][1]
body {
font-size: 15px;
line-height: 28px;
font-family: 'Rubik', sans-serif;
font-weight: 400;
}
.video-thumb .video-icon {
width: 35px;
height: 35px;
background-color: rgba(0,0,0,.9);
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.thumbnail-main, .video-content {
margin-bottom: 20px;
}
img {
max-width: 100%;
}
.inner-content span {
display: block;
margin-bottom: 10px;
text-transform: uppercase;
font-size: 10px;
font-weight: 500;
letter-spacing: 1px;
line-height: 12px;
}
.inner-content a.link {
color: #208385;
}
h5 {
font-size: 14px;
line-height: 22px;
font-weight: 700;
}
section {
padding: 100px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 thumbnail-main">
<a href="https://www.google.co.in/">
<div class="postion-relative">
<img src="http://placekitten.com/1000/500" alt="">
</div>
</a>
</div>
<div class="col-md-8 video-content inner-content">
<span class="date">10 Oct 2018</span>
<span class="cat-tag">
<a class="link" href="https://www.google.co.in/">Breast</a>
</span>
<a href="https://www.google.co.in/">
<h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
</a>
</div>
<div class="col-md-4 thumbnail-main">
<a href="https://www.google.co.in/">
<div class="postion-relative">
<img src="http://placekitten.com/1000/500" alt="">
</div>
</a>
</div>
<div class="col-md-8 video-content inner-content">
<span class="date">10 Oct 2018</span>
<span class="cat-tag">
<a class="link" href="https://www.google.co.in/">Breast</a>
</span>
<a href="https://www.google.co.in/">
<h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
</a>
</div>
</div>
</div>
</section>
Bootstrap columns can only have 12 columns in one row, in your example you have 4 div's with 4, 8, 4, 8 columns.
What you need to do is the following:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
<div class="container">
<div class="row align-items-center">
<div class="row col-md-4 col-lg-12">
<div class="col-lg-4 thumbnail-main">
<a href="https://www.google.co.in/">
<div class="postion-relative">
<img src="http://placekitten.com/1000/500" alt="">
</div>
</a>
</div>
<div class="col-lg-8 video-content inner-content">
<span class="date">10 Oct 2018</span>
<span class="cat-tag">
<a class="link" href="https://www.google.co.in/">Breast</a>
</span>
<a href="https://www.google.co.in/">
<h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
</a>
</div>
</div>
<div class="row col-md-4 col-lg-12">
<div class="col-lg-4 thumbnail-main">
<a href="https://www.google.co.in/">
<div class="postion-relative">
<img src="http://placekitten.com/1000/500" alt="">
</div>
</a>
</div>
<div class="col-lg-8 video-content inner-content">
<span class="date">10 Oct 2018</span>
<span class="cat-tag">
<a class="link" href="https://www.google.co.in/">Breast</a>
</span>
<a href="https://www.google.co.in/">
<h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
</a>
</div>
</div>
</div>
</div>
</section>
I surrounded the cards within a div, that contains a row with col-md-4 and col-lg-12. This will show a card at tablet and smaller, but if larger then a tablet it will show it in a row. Don't know if this is what you mean, i hope it helps :)!
Here is my PSD
I want to make this image exacly to go little below to second section. Here is my HTML look that i have made till now.
Its not going below as i dont know what will be its css. I think i have to change css of hero background class.. may be overflow or something else. Any one can help me to resolve my problem ? BY the way this hero image is seperate image.. let me show you the picture.
Below is the html code of the first and second section.
<div class="hero-background">
<!-- Navigation bar -->
<div class="navbar-fixed">
<div class="nav-wrapper">
<nav>
<div class="container">
<a href="#" class="brand-logo hide-on-small-only">
<img class="resonsive-img" src="img/logo.png"/>
</a>
<i class="material-icons black-text">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="white-text" href="#howItWorks">How it works</a></li>
<li><a class="white-text" href="#aboutUs">About</a></li>
<li><a class="white-text" href="#faq">FAQ</a></li>
<li><a class="white-text" href="#contact">Contact</a></li>
<li><a class="waves-effect waves-light btn stack-btn" href="#stack">Earn more</a></li>
</ul>
</div>
</nav>
</div>
</div>
<ul class="sidenav" id="mobile-demo">
<a href="#" class="brand-logo sidenav-close">
<img class="resonsive-img" src="img/logo.png"/>
</a>
<li><a class="mobile-menu-text sidenav-close" href="#howItWorks">How it works</a></li>
<li><a class="mobile-menu-text sidenav-close" href="#aboutUs">About</a></li>
<li><a class="mobile-menu-text sidenav-close" href="#faq">FAQ</a></li>
<li><a class="mobile-menu-text sidenav-close" href="#contact">Contact</a></li>
<li><a class="waves-effect waves-light btn stack-btn sidenav-close" href="#stack">Earn more</a></li>
</ul>
<!-- End Navigation bar -->
<!-- Hero section -->
<section id="hero">
<!-- Desktop & tablet version -->
<div class="row valign-wrapper hide-on-small-only" style="padding-top: 10%; height: 100vh;">
<div class="col s12">
<div class="container">
<h2 class="hero-title1">Earn more effortlessly</h2>
<h5 class="hero-title5">Stack boosts your wealth by automatically investing your excess cash</h5>
<a class="waves-effect waves-light btn stack-btn" href="#howItWorks">Show me how</a>
</div>
</div>
<div class="right" style="overflow: hidden; display: inline-block; padding-bottom: 5%">
<img class="resonsive-img" src="img/macbook.png"/>
</div>
</div>
<!-- Mobile version -->
<div class="col s12 hide-on-med-and-up" style="padding-top: 30%">
<div class="container">
<h2 class="hero-title1">Earn more effortlessly</h2>
<p class="hero-title5"><b>Stack boosts your wealth by automatically investing your excess cash</b></p>
<a class="waves-effect waves-light btn stack-btn" href="#howItWorks">Show me how</a>
</div>
</div>
</section>
</div>
<!-- End Hero section -->
<!-- How It Works section -->
<section id="howItWorks">
<div class="container">
<div class="section-heading">
<h2 class="center-align">How It Works</h2>
</div>
<div class="row">
<div class="col l6 m12 center-align">
<row>
<i class="large material-icons howItWorks-icon">device_hub</i>
</row>
<row>
<div class="howItWorks">
<h5>Seamless Connection</h5>
<p>Grow your Stack by connecting your bank account and creating your investment profile in just two minutes.</p>
</div>
</row>
</div>
<div class="col l6 m12 center-align">
<row>
<i class="large material-icons howItWorks-icon">trending_up</i>
</row>
<row>
<div class="howItWorks">
<h5>Boosted Earnings</h5>
<p>A smart algorithm monitors your spending patterns. Any spare cash is transferred into your Stack investment portfolio, giving you higher returns.</p>
</div>
</row>
</div>
<div class="col l6 m12 center-align">
<row>
<i class="large material-icons howItWorks-icon">cached</i>
</row>
<row>
<div class="howItWorks">
<h5>Frictionless Withdrawals</h5>
<p>We know that sometimes life gives you lemons, so Stack lets you access your cash in real time with our instant bank withdrawal feature.</p>
</div>
</row>
</div>
<div class="col l6 m12 center-align">
<row>
<i class="large material-icons howItWorks-icon">account_balance</i>
</row>
<row>
<div class="howItWorks">
<h5>Strong Foundations</h5>
<p>You can trust Stack's tech - its origins are in advanced computer science, nobel prize winning economics and is fully licensed and governed by ASIC*.</p>
<small>* Australian Securities Investment Commission</small>
</div>
</row>
</div>
</div>
</div>
</section>
<!-- End How It Works section -->
<!-- Stack section -->
<section>
<div class="stack-heading-background">
<div class="container center-align">
<div class="section-heading">
<h2>Stack earns you more</h2>
</div>
</div>
</div>
</section>
<section id="stack">
<div class="stack-background">
<div class="container">
<form class="col s12">
<!-- {% csrf_token %} -->
<row class="center-align">
<div class="col s12 stack-heading5">
<h5>How much do you save per month?</h5>
</div>
<div style="padding-top: 50px;">
<div id="savings-slider"></div>
</div>
<div class="center-align">
<h5 id="input-format"></h5>
</div>
</row>
<row>
<div class="center-align">
<p><i class="small material-icons howItWorks-icon">info</i>
<span class="answer">The average millenial saves $500 per month. Millenials are actually the best savers in Australia! Must be all those Netflix and chill nights...</span></p>
</div>
</row>
<row class="center-align">
<div class="col s12 stack-heading5" style="padding-top:10px">
<h5>What are you saving for?</h5>
</div>
</row>
<row>
<div class="col m6">
<div class="stack-radio-btn center-align">
<label>
<input type="radio" id="savingTargetHoliday" name="inputSavingTarget" value="5000"/>
<img class="circle responsive-img hoverable" src="img/icon/holiday.png">
<div class="stack-label">Holiday</div>
</label>
</div>
<div class="stack-radio-btn center-align">
<label>
<input type="radio" id="savingTargetCar" name="inputSavingTarget" value="25000"/>
<img class="circle responsive-img hoverable" src="img/icon/car.png">
<div class="stack-label">Car</div>
</label>
</div>
<div class="stack-radio-btn center-align">
<label>
<input type="radio" id="savingTargetHouse" name="inputSavingTarget" value="75000"/>
<img class="circle responsive-img hoverable" src="img/icon/house.png">
<div class="stack-label">House</div>
</label>
</div>
<div class="stack-radio-btn center-align">
<label>
<input type="radio" id="savingTargetWedding" name="inputSavingTarget" value="20000"/>
<img class="circle responsive-img hoverable" src="img/icon/wedding.png">
<div class="stack-label">Wedding</div>
</label>
</div>
<div class="stack-radio-btn center-align">
<label>
<input type="radio" id="savingTargetRetirement" name="inputSavingTarget" value="1000000"/>
<img class="circle responsive-img hoverable" src="img/icon/retirement.png">
<div class="stack-label">Retirement</div>
</label>
</div>
</div>
<div class="stack-radio-btn center-align">
<label>
<input type="radio" id="savingTargetAvocado" name="inputSavingTarget" value="2500"/>
<img class="circle responsive-img hoverable" src="img/icon/avocado.png">
<div class="stack-label">Smashed Avo</div>
</label>
</div>
</row>
<row>
<div class="holidayAnswer center-align">
<p><i class="small material-icons howItWorks-icon">info</i>
<span class="answer">Cocktails on the beach anyone?! $5,000 should do it in style</span></p>
</div>
<div class="carAnswer center-align">
<p><i class="small material-icons howItWorks-icon">info</i>
<span class="answer">Vroom vroom! Impress your peeps with a brand new $20,000 car</span></p>
</div>
<div class="houseAnswer center-align">
<p><i class="small material-icons howItWorks-icon">info</i>
<span class="answer">Not everyone is locked out of the housing market! $75,000 should get you a deposit on a sweet pad</span></p>
</div>
<div class="weddingAnswer center-align">
<p><i class="small material-icons howItWorks-icon">info</i>
<span class="answer">Splurge $20,000 on your big day and don’t feel guilty about skimping out on your distant relatives!</span></p>
</div>
<div class="retirementAnswer center-align">
<p><i class="small material-icons howItWorks-icon">info</i>
<span class="answer">You'll need at least $1,000,000 to enjoy the perks of retirement...like making a grand entrance at the pokies in the latest model mobility scooter!</span></p>
</div>
<div class="avocadoAnswer center-align">
<p><i class="small material-icons howItWorks-icon">info</i>
<span class="answer">Two raw vegan brunches every weekend will set you back $2,500 each year! Better start saving...</span></p>
</div>
</row>
<div class="row" style="padding-bottom:15%">
<div class="input-field col s12 center-align">
<button class="btn waves-effect waves-light stack-btn" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- End Stack section -->
Now it my css code
/*------------------------------------*\
#HERO Section
\*------------------------------------*/
.hero-background {
background-image: url("../img/hero-bg.png");
background-color: #EAEAEA;
background-repeat: no-repeat;
height: auto;
background-size: cover;
background-position: right top;
}
#media only screen and (max-width: 993px) {
.hero-background {
background-position: 75% 50%;
}
}
.hero-title1 {
color: #4741d6;
padding-top: 30px;
padding-bottom: 10px;
line-height: 1.2;
}
.hero-title5 {
color: #4741d6;
padding-bottom: 30px;
line-height: 1.5;
}
/*------------------------------------*\
#HOW IT WORKS Section
\*------------------------------------*/
.howItWorks {
padding: 0px 60px 20px 60px;
}
.howItWorks-icon {
color: #4741d6;
}
I just checked the link that you provided and i tried to achieve the same
fiddle : https://jsfiddle.net/s92o1xq9/1/
you have to use media query for different breakpoints to change the ratio of the img
.hero-background {
background-color: #ccc;
height: 75vh;
position: relative;
z-index: 6;
}
.overlay {
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.overlay img {
max-width: 100%;
height: auto;
}
.data {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<div class="hero-background">
<div class="overlay">
<img src="http://djgt.co.uk/random/stack/img/hero-bg.png" alt="">
</div>
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione atque, error maiores minima modi ipsam possimus rerum ad molestias est architecto, quae aperiam sunt eaque veritatis aliquid fugiat maxime. Impedit?
</div>
</div>
Here what you need as per screenshot is to slice the laptop image with the pattern in png format and place it in a div and make it absolute relative to main banner section.
Hope this is helpful to you. kindly check the example snippet.
.banner {
height: 500px;
position: relative;
display: flex;
align-items: center;
background: #eee;
z-index: 1;
}
.content {
padding: 30px 0;
}
.ab {
position: absolute;
right: 0;
top: 0;
}
<div class="banner">
<h1>Hello Dummy is here</h1>
<div class="ab">
<img src="https://image.ibb.co/eY8X5d/Untitled_1.png">
</div>
</div>
<div class="content">
<h1>Hello Dummy is here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>