I am using bootstrap 4 on a litte project for school. I created a layout where there's a carousel next to some text. The problem is that my carousel on the right is responsive for every device width except for mobile devices. It's adjusting perfectly on every other device width, but for some reason my carousel is too big for mobile devices.
Every help is appreciated!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title>deinUrlaub.at</title>
<link rel="icon" href="imgs/icon.png">
<link rel="stylesheet" href="mall.css">
</head>
<body>
<nav class="navbar navbar-expand-md py-4 bg-info navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="imgs/logoNAV.png" class="float-right rounded-circle" alt="deinUrlaub.at" width="100">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link h4 active" href="index.html">START</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="TOP-3.html">TOP 3</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="BILDERGALERIE.html">BILDERGALERIE</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="ÜBER.html">ÜBER</a>
</li>
</ul>
</div>
</nav>
<main class="p-4 justify-content-center">
<a href="index.html" class="btn btn-info btn-lg mb-4" >Zurück</a>
<div class="container-fluid">
<div class="float-right">
<div class="container ml-2 my-2">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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 class="rounded" src="imgs/mallorcaBild1.jpg" alt="Los Angeles" width="800">
</div>
<div class="carousel-item">
<img class="rounded" src="imgs/mallorcabild2.jpg" alt="Chicago" width="800">
</div>
<div class="carousel-item">
<img class="rounded" src="imgs/mallorcabild3.jpg" alt="New York" width="800">
</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>
<h1>Mallorca</h1>
<h2 class="text-secondary">Mallorca bietet wunderschöne Strände mit einem traumhaften türkisen Meer.
</h2>
<br>
<p>Nicht ohne Grund ist Mallorca die beliebteste Baleareninsel, denn sie hält jede Menge für ihre
Besucher bereit. Egal wie man den Urlaub gestalten möchte, es gibt für jeden Geschmack etwas.
</p>
<br>
<p>
Strandliebhaber und Sonnenanbeter finden Ihr Glück an langen Stränden oder kleinen Buchten, umspült
von kristallklarem, azurblauem Wasser und gesäumt meistens mit feinem, weißen Sand. Das Mittelmeer
bietet aber noch viel mehr – für Wassersportler gibt es Angebote für zum Tauchen und Schnorcheln,
Segeln, sowie Kayakfahren und viel mehr.
</p>
<br>
<p>
An Land findet sich ebenso viel zu entdecken, etwa für Wanderer oder Radfahrer. Die einzigartige
Gebirgslandschaft der Serra de Tramuntana mit ihren pittoresken Bergdörfern laden zu Touren oder
Ausflügen im Mietwagen ein.
Wer auf Mallorca Urlaub machen will, wählt aus einer Vielzahl an Unterkünften aus, neben attraktiven
Hotels mit Poollandschaften, gibt es zudem ländliche Hotels, Apartments, sowie Ferienhäuser oder
Fincas.</p>
<div class="text-right">
<a href="#" class="btn btn-info btn-sm mr-5 mt-4" >Jetzt Buchen</a>
</div>
</div>
</main>
<footer class="container-fluid p-5 bg-info text-white text-left">
<div class="row">
<div class="column col-md-11">
<p>TEL: 0680 3336549</p>
<p>EMAIL: support.deinUrlaub#gmail.com</p>
</div>
<div class="column">
<br>
<p>© deinUrlaub.at</p>
</div>
</div>
</div>
</footer>
</body>
</html>
And here's my css:
h1 {
font-size: 65px;
}
p {
font-size: 23px;
}
.btn-sm {
padding-left: 20px;
padding-right: 20px;
font-size: 40px;
border-radius: 10px;
}
.container {
width: 50pc;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
Okay, I just fixed it by not writing a specific width in .container, but giving it a min-width aswell as a max-width (which would be my specific width). Thanks for helping everyone!
Related
Good evening,
I am developing an online shopping site for supermarkets.
The problem I have is that I want to move a button upwards so that it is in the same line of a text, I show you the image so that you understand better:
you see the buy button I want to put it in the same line as the "price: 2.5 dhs", I put a margin-bottom : 30px;
but it does not work the button does not move!
I do not know if it is a problem of template that puts conditions because I download the template aroma.
here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card" style="width: 18rem; height: 500px;">
<img src="img/perli.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" style="width: 18rem; height: 500px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine <i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and this is my css code :
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
}
.btn-achat{
margin-left: 200px;
margin-bottom: 50px;
}
#card2{
margin-left: 300px;
margin-bottom: 300px;
}
Thank you in advance for your help !
You have to wrap and in a div
<div class="myClass">
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button type="button" class="btn btn-primary">Primary</button>
</div>
and give it a class here in my demo i have given it name myClass and add following properties:
.myClass{
display:flex;
align-items: center;
justify-content: space-between;
}
Working demo:
Note : i don't have all you local images so i have only focussed on your requirement, so do scroll down and check checkout button alignment with price.
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
}
.btn-achat{
margin-left: 200px;
margin-bottom: 50px;
}
#card2{
margin-left: 300px;
margin-bottom: 300px;
}
.myClass{
display:flex;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="./text.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span
class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors
profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card" style="width: 18rem; height: 500px;">
<img
src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<div class="myClass">
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button type="button" class="btn btn-primary">Primary</button>
</div>
</div>
</div>
<div class="card" style="width: 18rem; height: 500px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre
site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici
sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine
<i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
you should add this line to your css file:
.prix {
color: red;
font-size: 150%;
display:inline-block
}
and delete this one:
.btn-achat {
/* margin-left: 200px; */
margin-bottom: 50px;
}
Good evening,
I am developing a website for online purchase.
i want my div down a little down for which aye the same positioning as any other class card div.
here is an image to better understand:
How can you see the div that contains the "yopro" and a little up not like the first.
here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine Shop - Home</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
<li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
<li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
<li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
<li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
<li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
<li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<main class="site-main">
<!--================ Hero banner start =================-->
<section class="hero-banner">
<div class="container">
<div class="row no-gutters align-items-center pt-60px">
<div class="col-5 d-none d-sm-block">
<div class="hero-banner__img">
<img class="img-fluid" src="img/marjane.png" alt="">
</div>
</div>
<div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
<div class="hero-banner__content">
<h4>Shop is fun</h4>
<h1>Parcourer tout les produits de marjane sur cette page !</h1>
<p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors profitez de nos belles offres !</p>
<a class="button button-hero" href="#">Browse Now</a>
</div>
</div>
</div>
</div>
</section>
<!--------------- all produit ------------>
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card cardcss" style="width: 18rem; height: 500px;">
<img src="img/perli.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix" >Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" style="width: 18rem; height: 530px;" id="card2">
<img src="img/yopro.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
<!--================ Start footer Area =================-->
<footer class="footer">
<div class="footer-area">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title large_title">Notre mission</h4>
<p>
Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici sur notre site d'une manière assez facile !.
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Notre position
</p>
<p>Temara, hay el wifaq</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Numéro de téléphone
</p>
<p>
(+212) 06 33 26 39 43 <br>
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Notre email
</p>
<p>
nawfalbougrine#outlook.fr <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine <i class="fa fa-heart" aria-hidden="true"></i>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and here is my css code:
#h1_all_product {
text-align: center;
font-size: 250%;
text-transform: uppercase;
color: #2a2b75;
}
.prix{
color: red;
font-size: 150%;
display:inline-block;
margin-right: 65px;
}
.btn-achat{
margin-bottom: 30px;
margin-top: 15px;
}
#card2{
display: inline-block;
}
.cardcss{
display: inline-block;
}
Thank you in advance for your help !
Give your images a fixed height and percentage width, and use object-fit: cover and object-position:center. Something like this:
img.card-img-top {
object-fit: cover;
width: 90%;
height: 300px;
object-position: center;
}
#h1_all_product {
text-align: center;
font-size: 2em;
text-transform: uppercase;
color: #2a2b75;
}
.prix {
color: red;
font-size: 150%;
display: inline-block;
margin-right: 65px;
}
.btn-achat {
margin-bottom: 30px;
margin-top: 15px;
}
#card2 {
display: inline-block;
}
.cardcss {
display: inline-block;
}
img.card-img-top {
object-fit: cover;
width: 90%;
height: 300px;
object-position: center;
}
<section id="section_all_produit">
<h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
<div class="card cardcss">
<img src="https://placekitten.com/300/600" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Perly</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
<div class="card" id="card2">
<img src="https://placekitten.com/300/550" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Yopro</h5>
<p class="card-text">Quantité : 90g</p>
<p class="card-text">Marques : Jaouda</p>
<p class="card-text">Lieux de fabrication: Taroudant</p>
<h3 class="prix">Prix : 2.5 Dhs</h3>
<button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>
</div>
</div>
</section>
Good afternoon! I am reviewing a college paper and wanted to remove the underline from the link inside the button, the underline only appears when hovering over the button. I would like to remove the underline to make the button totally clean, can anyone tell me which tags are used to remove?
body {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.div {
display: inline-block;
}
.botao {
width: 30px;
height: 45px;
border-radius: 25px;
}
.esquerda {
margin-right: 5%;
}
.indicador {
width: 30px;
height: 45px;
border-radius: 25px;
}
.indicador:visited {
width: 300px;
height: 45px;
border-radius: 25px;
}
#compra {
background-color: orange;
width: 10%;
margin-top: 3.5%;
border-radius: 25px;
}
.btn {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Eco Aero - Viagens</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Boostrap CSS -->
<link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../estilo/style.css">
<script type="text/JavaScript" src="../js/resultadomes.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobre.html">Sobre</a>
</li>
<li>
<a class="nav-link" href="contato.html">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="login.html">Entrar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="inscrever.html">Inscrever-se</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
<li data-target="#carouselSite" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../imagem/slide-01.png" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-02.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-03.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-04.jpeg" class="img-fluid d-block">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Passagens Aéreas</h1>
</div>
</div>
<div class="row justify-content-center mb-5">
<div class="col-sm-12 col-md-10 col-lg-8">
<form name="consulta" method="post">
<div class="form-row">
<div class="form-group col-sm-6">
<label for="escolhaDataIda">Escolha Data de Ida:</label>
<input type="date" id="escolhaDataIda" class="form-control" name="dataida" required>
</div>
<div class="form-group col-sm-6">
<label for="escolhaDataVolta">Escolha Data de Volta:</label>
<input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
</div>
<div class="form-group col-sm-12">
<a href="listaderesultados.html">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mb-3">
<hr>
</div>
<div class="col-sm-4">
<h3>Eco Aero - Viagens</h3>
<p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
</div>
<div class="col-sm-4">
<h3>Menu</h3>
<div class="list-group text-center">
Início
Sobre
Contato
Passagens Aéreas
</div>
</div>
<div class="col-sm-4">
<h3>Social</h3>
<div class="btn-group-vertical btn-block btn-group-lg" role="group">
<a class="btn btn-outline-primary" href="#">Facebook</a>
<a class="btn btn-outline-info" href="#">Twitter</a>
<a class="btn btn-outline-warning" href="#">Instagram</a>
</div>
</div>
<div class="col-12 mt-5">
<blockquote class="blockquote text-center">
<p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
<footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
</blockquote>
</div>
</div>
</div>
<!-- Modal -->
<!-- Optional JavaScript -->
<!-- jquery first, then popper.js, then Bootstrap 3S -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/popper.js/dist/umd/popper.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Simply added this CSS rule to your existing code in last line
a {text-decoration: none;}
body{
margin-left:auto;
margin-right:auto;
text-align:center;
}
.div{
display:inline-block;
}
.botao{
width:30px;
height:45px;
border-radius:25px;
}
.esquerda{
margin-right:5%;
}
.indicador{
width:30px;
height:45px;
border-radius:25px;
}
.indicador:visited{
width:300px;
height:45px;
border-radius:25px;
}
#compra{
background-color:orange;
width:10%;
margin-top:3.5%;
border-radius:25px;
}
.btn, a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Eco Aero - Viagens</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Boostrap CSS -->
<link rel="stylesheet" href="../node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../estilo/style.css">
<script type="text/JavaScript" src="../js/resultadomes.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand h1 mb-0" href="index.html">Eco Aero - Viagens</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sobre.html">Sobre</a>
</li>
<li>
<a class="nav-link" href="contato.html">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="passagensareas.html">Passagens Aéreas</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="login.html">Entrar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="inscrever.html">Inscrever-se</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
<li data-target="#carouselSite" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../imagem/slide-01.png" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-02.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-03.jpeg" class="img-fluid d-block">
</div>
<div class="carousel-item">
<img src="../imagem/slide-04.jpeg" class="img-fluid d-block">
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Passagens Aéreas</h1>
</div>
</div>
<div class="row justify-content-center mb-5">
<div class="col-sm-12 col-md-10 col-lg-8">
<form name="consulta" method="post">
<div class="form-row">
<div class="form-group col-sm-6">
<label for="escolhaDataIda">Escolha Data de Ida:</label>
<input type="date" id="escolhaDataIda" class="form-control" name="dataida" required>
</div>
<div class="form-group col-sm-6">
<label for="escolhaDataVolta">Escolha Data de Volta:</label>
<input type="date" id="escolhaDataVolta" class="form-control" name="datavolta">
</div>
<div class="form-group col-sm-12">
<a href="listaderesultados.html">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mb-3"><hr></div>
<div class="col-sm-4">
<h3>Eco Aero - Viagens</h3>
<p>A melhor agência de viagens sobre medidas para todos os tipos de pessoas e gostos.Viaje com a gente e venha conhecer novos lugares, culturas e compartilhar as melhores imagens e guardar as melhores lembranças.</p>
</div>
<div class="col-sm-4">
<h3>Menu</h3>
<div class="list-group text-center">
Início
Sobre
Contato
Passagens Aéreas
</div>
</div>
<div class="col-sm-4">
<h3>Social</h3>
<div class="btn-group-vertical btn-block btn-group-lg" role="group">
<a class="btn btn-outline-primary" href="#">Facebook</a>
<a class="btn btn-outline-info" href="#">Twitter</a>
<a class="btn btn-outline-warning" href="#">Instagram</a>
</div>
</div>
<div class="col-12 mt-5">
<blockquote class="blockquote text-center">
<p class="mb-0">O sucesso não é garantido, mas o fracasso é certo se você não estiver emocionalmente envolvido em seu trabalho.</p>
<footer class="blockquote-footer">Biz Stone <cite title="Título">Fundador do Twitter</cite></footer>
</blockquote>
</div>
</div>
</div>
<!-- Modal -->
<!-- Optional JavaScript -->
<!-- jquery first, then popper.js, then Bootstrap 3S -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/popper.js/dist/umd/popper.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
My problem is that my fixed bootstrap navigation is covering 60px (the navigation's height) of my page, so it's screwing op the "padding" of the columns I have.
I tried to put margin: 60px on .section, but it just pushes the page 60px down, not resizing the page by 60px. Instead there is 60px hidden at the bottom.
There is no padding-top/bottom defined on the columns. They are defined with display: flex and align-items: center, with a div inside containing the text so it will be centered all time.
https://jsfiddle.net/fmcq9wpn/7/
CSS:
.col-lg-6 {
display: flex;
align-items: center;
.text {
padding: 0 5%;
h3 {
font-weight: bold;
padding-bottom: 10px;
}
p {
line-height: 2.0;
}
}
}
HTML:
<div class="section news">
<div class="row">
<div class="picture col-lg-6 col-md-6 col-12 col-sm-12">
</div>
<div class="col-lg-6 col-md-6 col-12 col-sm-12">
<div class="text">
<p>Mandag 27. Januar, 2019</p>
<H3>COACHING-FOREDRAGSRÆKKE PÅ UNIVERSITET</H3>
<p>Har man lyst til at vide mere om coaching fra forskellige, faglige perspektiver, arrangerer
professor
Reinhardt Stelter en foredragsrække på . . .</p>
<br> <button>Læs mere</button>
</div>
</div>
</div>
<div class="row">
<div class="news-box col-lg-6 col-md-6 col-12 col-sm-12">
<div class="text">
<p>Torsdag 5. Februar, 2019</p>
<h3>SIKKEN FEST!</h3>
<p>Tak til alle gæster, som kom og fejrede det nye års ankomst sammen med os! Det blev en
vidunderlig
fredag . . .</p><br>
<button>Læs mere</button>
</div>
</div>
<div class="picture col-lg-6 col-md-6 col-12 col-sm-12">
</div>
</div>
</div>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Cpenhagen Coaching Center</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
Menu <i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-proofer-ignore href="/#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#testimonial">Testimonial</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#signup">Sign up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#footer">Footer</a>
</li>
</ul>
</div>
</nav>
It's like the .section will always be the same size as the window.
I have a picture here: https://ibb.co/BgskKSb showing the layout.
Use the fullpage.js option paddingTop.
For example:
new fullpage('#fullpage', {
paddingTop: '60px'
});
I'm using Bootstrap on my website. My website has two columns on a desktop screen: a big area for my content, and a small area at the right side for some information about upcoming events. The two areas nicely resize (become smaller) when I make my browser smaller, and at some point, the rightmost column jumps to the bottom, just as the responsiveness is intended.
On my homepage I use the carousel based on this example of w3schools.
The problem is that the picture of the carousel never resizes according to the column width, it always stays the same. In the w3school example, you can see that resizing your browser results in resizing the images.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Arimo:400,700'>
<link rel="stylesheet" type='text/css' href="/Content/bootstrap.css" />
<link rel="stylesheet" type='text/css' href="/Content/bootstrap-datepicker.css" />
<link rel="stylesheet" type='text/css' href="/Content/NYC.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div> <!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<header>
<h2>Welkom</h2>
</header>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src='https://farm8.staticflickr.com/7497/15440536044_ddb9b9a4f2_z.jpg' alt="Foto" >
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm8.staticflickr.com/7542/15440460614_e147f37c21_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm8.staticflickr.com/7562/15761616062_9cd995c76f_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm3.staticflickr.com/2905/13976192867_78bd01faa1_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm4.staticflickr.com/3949/15574689588_2b427e30fa_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
</div><!-- /.carousel-inner -->
<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><!-- /.carousel -->
</div>
<div class="col-sm-3 col-sm-offset-1">
<header>
<h3>Vandaag</h3>
</header>
<ul class="interestingevents">
<li>
<p class="posted">Niks te zien</p>
</li>
</ul>
<header>
<h3>Komende evenementen</h3>
</header>
<ul class="interestingevents">
<li>
<a href='/Event/showEvent?eventID=13'>
<p class="posted">
zondag 8 maart 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
Winterwedstrijd
</p>
<br/>
</a>
</li>
<li>
<a href='/Event/showEvent?eventID=20'>
<p class="posted">
zaterdag 14 maart 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
Onderhoud infrastructuur
</p>
<br/>
</a>
</li>
<li>
<a href='/Event/showEvent?eventID=21'>
<p class="posted">
zondag 15 maart 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
Onderhoud infrastructuur
</p>
<br/>
</a>
</li>
</ul>
<header>
<h3>Gepasseerde evenementen</h3>
</header>
<ul class="interestingevents">
<li>
<p class="posted">
zondag 8 februari 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=12'>Winterwedstrijd</a>
</p>
<br />
</li>
<li>
<p class="posted">
zondag 18 januari 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=17'>Ledenvergadering</a>
</p>
<br />
</li>
<li>
<p class="posted">
zondag 4 januari 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=10'>Winterwedstrijd</a>
</p>
<br />
</li>
</ul>
</div>
</div>
</div>
<footer>
<div id="copyright">
<div class="container">
<p>Created by </p>
</div>
</div>
</footer>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"c3ad45de45c543c5bc071cf0007d01e5"}
</script>
<script type="text/javascript" src="http://localhost:60883/d9c407548b294087843ff4faeef78add/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Maybe you can try with the Bootstrap CDN links:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Take a look at the Bootstrap website.