I'm trying to add the animation 'fadeIn' into my proje[enter link description here][1]ct but the animation doesn't work. I would appreciate it if anyone who has experience with animate.css will be able to help me out. I installed the CDN { from animate.css website into my project.
I added "animate__animated animate__fadeIn" into my class but it's not working.
Any help would be appreciated thank you.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Omni Food</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/IMG/logo-white.png" alt="Omnifood logo" class="logo">
<img src="Resources/IMG/logo.png" alt="Omnifood logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
<section class="section-features js--section-features" id="features">
<div class="row">
<h2>Get food fast — not fast food.</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row animate__animated animate__fadeIn">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
In the documentation of Animate.css says:
You can't animate inline elements. Even though some browsers can
animate inline elements, this goes against the CSS animation specs and
will break on some browsers or eventually cease to work. Always
animate block or inline-block level elements (grid and flex containers
and children are block-level elements too). You can set an element to
display: inline-block when animating an inline-level element.
Maybe, for some reason, the display of the element don't let to show the animation.
It would be helpful if we can check your project online, to get deeper.
Here is working code of animate.css. Its just working fine as you needed with fadeIn Effects.
Demo: https://jsfiddle.net/usmanmunir/2mbghper/7/
Refer to this documentation for more info: https://animate.style/
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Omni Food</title>
</head>
<body>
<header>
<h1 class="animate__animated animate__fadeIn">An animated element</h1>
<nav>
<div class="row animate__animated animate__fadeIn">
<ul class="main-nav animate__fadeIn">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="hero-text-box animate__animated animate__fadeIn">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
<section class="section-features js--section-features" id="features">
<div class="row animate__animated animate__fadeIn">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
Related
I have a project and use more than 1 template I have problems with 2 css links from 2 different templates, I want the css link from templates to only affect a single html card without affecting the rest in file .cshtml . Please give me a solution.
I have the layout.cshtml file as follows and the css link in my 2nd templates in the last line
<head>
<title>POU Education Category Bootstrap Responsive website Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="POU Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- Custom Theme files -->
<link href="~/home/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<!-- shop css -->
<link href="~/home/css/shop.css" type="text/css" rel="stylesheet" media="all">
<link href="~/home/css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- font-awesome icons -->
<link href="~/home/css/font-awesome.css" rel="stylesheet">
<!-- //Custom Theme files -->
<!-- online-fonts -->
<!-- logo -->
<link href="//fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<!-- titles -->
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800,800i" rel="stylesheet">
<!-- body -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<!-- //online-fonts -->
<link href="//fonts.googleapis.com/css2?family=Hind:wght#300;400;500;600&display=swap" rel="stylesheet">
<link href="//fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap" rel="stylesheet">
<link href="~/css/style-starter.css" type="text/css" rel="stylesheet">
</head>
This is an index.cshtml file code that uses the layout above
<!--end post-->
<div class="w3l-homeblock2 py-5">
<div class="container py-lg-5 py-md-4">
<!-- block -->
<div class="row">
<div class="col-lg-12">
<h3 class="section-title-left mb-4"> Editor's Pick </h3>
<div class="row">
<div class="col-lg-6 col-md-6 item">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#blog-single.html">
<img class="card-img-bottom d-block radius-image-full"
src="assets/images/image1.jpg" alt="Card image cap">
</a>
</div>
<div class="card-body blog-details">
<span class="label-blue">Beauty</span>
<a href="#blog-single.html" class="blog-desc">The 3 Eyeshadow palettes I own & How to
downsize your stash
</a>
<p>Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis
vitae sit.</p>
<div class="author align-items-center mt-3 mb-1">
<img src="assets/images/a1.jpg" alt="" class="img-fluid rounded-circle" />
<ul class="blog-meta">
<li>
Isabella ava </a>
</li>
<li class="meta-item blog-lesson">
<span class="meta-value"> July 13, 2020 </span>. <span
class="meta-value ml-2"><span class="fa fa-clock-o"></span> 1 min</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 mt-md-0 mt-sm-5 mt-4">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#blog-single.html">
<img class="card-img-bottom d-block radius-image-full"
src="assets/images/image2.jpg" alt="Card image cap">
</a>
</div>
<div class="card-body blog-details">
<span class="label-blue">Fashion</span>
<a href="#blog-single.html" class="blog-desc">2 New outfit formulas to add to your
Capsule Wardrobe
</a>
<p>Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis
vitae sit.</p>
<div class="author align-items-center mt-3 mb-1">
<img src="assets/images/a2.jpg" alt="" class="img-fluid rounded-circle" />
<ul class="blog-meta">
<li>
Charlotte mia </a>
</li>
<li class="meta-item blog-lesson">
<span class="meta-value"> July 13, 2020 </span>. <span
class="meta-value ml-2"><span class="fa fa-clock-o"></span> 1 min</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would like to take the path css at the bottom of the layout.cshtml file (<link href="~/css/style-starter.css" type="text/css" rel="stylesheet">) only affects the card // in the first line (//) but other card components will not be usable in the index file.cshtml
What I understand is that you got 2-cards in 2-separate-html-files, now you want some global-css to be applied on one, but not in the other html-file or some card contained there.
Solution-1:
Add an extra class like .special-card and use this class in 1st-file to add CSS to the card selectively, based on this class. Now, when you don't have attach this class in the 2nd card, CSS will NOT be automatically applied there.
Solution-2:
In card, where you don't want the CSS to be applied, use Inline-CSS adding styles in the html-element directly to override CSS coming from global-CSS file.
Solution-3:
Keep the CSS that you want to partially apply in some separate test.css file, and attach it to only the card (externally), where you want to apply this. Just don't just attach this external .CSS file in your 2nd html file, so it won't take affect.
I am completing a course from coursera on bootstrap and was following along with the course, but the toggle button on the navigation bar of one of the webpages isn't working and displays error in the console "Failed to load resource: the server responded with a status of 404 (Not Found)"
I have the same code in the index.html (home page) and the button seems to be working perfectly in that, but in the aboutus.html it won't open the collapsed navigation options
Here are the codes:
aboutus.html --> the one with the error
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta 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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion: About Us</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-header">
<ol class="col-12 breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">About Us</li>
</ol>
<div class="col-sm-6">
<h3>About Us</h3>
<hr>
</div>
</div>
<div class="row row-content">
<div class="col col-sm-6 order-sm-last col-md-6">
<h2>Our History</h2>
<p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
<p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
</div>
<div>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-12">
<h2>Corporate Leadership</h2>
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p>
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta 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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm-6 order-sm-last col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm-6 col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm-6 order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I believe you're missing the script tags at the end of your aboutus page. Try adding these lines just before you close your body tag.
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
I have an issue with my website where whitespaces render outside the HTML tag borders on mobile. The issue is on mobile only and the same thing happens when the mobile chrome browser is set to desktop mode on mobile.
Initial load mobile
This is how the website loads initially on mobile but the scroll is going way past the viewport of the HTML tags.
Zoomed out
The thing I don't understand is the website removes the whitespace if the client rotates from portrait to horizontal and back.
As I use the same static template on all webpages the issue persists throughout the whole website.
The website is: Zefir.codes
Website uses:
Animate (CSS Library)
Bulma (CSS Library)
Heres the template for the static webpages:
<html>
<head>
<title>A Hacker's world</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index-min.css">
<link rel="stylesheet" href="css/animate.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="section">
<div class="container">
<a href="index.html"> <h1 class="title animated pulse">
Zefir Repository <img src="img/logo.png" width="150px" height="150px" align="right">
</h1>
<p class="subtitle animated bounceInRight">
A <strong>Hacker's</strong> World
</p>
</a>
</div>
</section>
<br/>
<div class="container is-widescreen">
<div class="tabs is-small animated lightSpeedIn">
<ul>
<li>Tutorials</li>
<li>Projects</li>
<li>About me</li>
</ul>
</div>
</div>
<br/>
<!--Page Content-->
<div class="animated zoomIn">
<div class="container is-fluid">
<!--Column start-->
<div class="columns">
<!--first Column-->
<div class="column is-one-quarter">
</br>
<p class="title">
Updates
</p>
<!--Notify03-->
<div class="card">
<header class="card-header">
<p class="card-header-title">
A rebirth of the website!
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">
The website is coming back and strong!
<br>
<time datetime="2020-05-15">22:04 - 15 May 2020</time>
</div>
</div>
</div>
</div>
<!--second Column-->
<div class="column">
</br>
<p class="title">
News
</p>
<div class="card">
<header class="card-header">
<p class="card-header-title">No News
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">...
<br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time>
</div>
</div>
</div> <div class="card">
<header class="card-header">
<p class="card-header-title">No news </p>
</header>
<div class="card-content"> <div class="content">... <br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time> </div> </div></div>
</div>
</div>
</div>
<!--End of Content-->
</br>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Zefir Repository is a collection of projects and tutorials by <strong>Jan Andersson</strong> Hosted on <strong>Infinityfree</strong>.
</p>
</div>
</div>
</footer>
</div>
</body>
</html>
It does this because your elements are positioned way to the right before the animation starts and the browser keeps this whitespace.
Either change your animation or a simple fix is to add:
body {
overflow-x: hidden;
}
add overflow-hidden to the body of your website hope this solves your issue.
I would like to show the right position div into the left position in the mobile view. I am using bootstrap 4. Below I am adding my HTML code. The right image should come first at in mobile view. Thanks In Advance.
<div class="card">
<div class="row no-gutters">
<div class="col-8">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and
use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
Explore <i class="fa fa-caret-right"></i>
</div>
</div>
<div class="col-4">
<img src="./images/product-development.jpg" class="img-fluid" alt="product-development">
</div>
</div>
</div>
Use the flex order utility classes...
<div class="card">
<div class="row no-gutters">
<div class="col-8 order-last order-sm-first">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation,
and use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
Explore <i class="fa fa-caret-right"></i>
</div>
</div>
<div class="col-4 order-first">
<img src="./images/product-development.jpg" class="img-fluid" alt="product-development">
</div>
</div>
</div>
<script src="http://codeply.com/js/embed.js"></script><div data-codeply="GW6MbfBVbA" ></div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="row no-gutters">
<div class="col-md-8 order-md-1 order-sm-12 order-12">
<div class="card-block">
<h4 class="card-title">v</h4>
<p class="card-text">Robotics is an interdisciplinary branch of engineering and science that includes mechanical engineering, electronic engineering, information engineering, computer science, and others. Robotics deals with the design, construction, operation, and
use of robots, as well as computer systems for their control, sensory feedback, and information processing.</p>
Explore <i class="fa fa-caret-right"></i>
</div>
</div>
<div class="col-md-4 order-md-12 order-sm-1 order-1">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" class="img-fluid" alt="product-development" style="width: 100%;">
</div>
</div>
</div>
</body>
</html>
I've been starting to explore Twitter Bootstrap, and I tried to write or replicate some of their example codes. I used a div with their .container class for the wrapper, and added some rows and columns in it. Having a div with a .container class supposedly centers the div automatically, but in my case, I'm having an unbalanced content. The white space on the left side is much wider than the white space on the right side. Here's the code (I'm not using any css styles):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Room</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel='stylesheet' href='style.css' />
<!--responsive bootsrap here-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"></div>
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div> <!-- first row -->
<div class="span12">
<div class="hero-unit">
<h1>Hey Mark! <small>and everybody!</small></h1>
<p>Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very passionate about film making. I love the idea on sucking on making films, spending $6m for my first feature film, which is my masterpiece of course! The title of my masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div><!-- second row -->
</div>
</div>
</body>
</html>
Here is the screenshot:
https://dl.dropboxusercontent.com/u/70465637/error_center.jpg
Notice how the left white space is wider than the right white space.
Help Please, thanks in advance.
Your div.span12 should be a child of div.row.
<div class="row">
<div class="span12"></div>
</div>
replace body tag with this
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div>
<!-- first row -->
</div>
<div class="row">
<div class="span12">
<div class="hero-unit">
<h1>
Hey Mark! <small>and everybody!</small></h1>
<p>
Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very
passionate about film making. I love the idea on sucking on making films, spending
$6m for my first feature film, which is my masterpiece of course! The title of my
masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit
her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div>
<!-- second row -->
</div>
</div>
</div></body>
check your code properly your span12 div should come inside of <div class="row"></div>
your code should be something like this
<div class="container">
<div class="row">
<div class="span12"> your content goes here </div>
</div>
</div>
If you're still having trouble with the whitespace after putting your span12 div inside your row, then it might be because Bootstrap specifies its own margins and padding etc.
You may have to set your own margins or padding for your span. You can override the bootstrap styles in your CSS with the !important declaration:
.span12 {
margin-left: -50px !important;
}