I've been searching for this issue for months, never finding a solution, and not understanding how come noone ever asked it before.
It's pretty simple:
Full Width Slider in Materialize: The images in the slider are being cropped. If I resize the window (to a bigger or smaller size) it will adjust and show me the images at full size (not cropped).
Just see the height of the image, it shows a thin image instead of a bigger one, but if you resize the window it'll automatically adjust:
https://codepen.io/anon/pen/drJWxG
Best regards and thanks in advance!!!!!!!!!!!!!
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Slyder</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<style>
h1{padding:10px auto, color:#fff}
.carousel .carousel-item > img {max-width:100%;height:auto;}
</style>
</head>
<body>
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1" class="responsive-img"></a>
<a class="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2" class="responsive-img"></a>
<a class="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3" class="responsive-img"></a>
<a class="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4" class="responsive-img"></a>
</div>
<div class="row">
<div class="col l12 red">
<h1>Please resize window to see the slider's height change</h1>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel.carousel-slider').carousel({fullWidth: true});
});
</script>
</body>
</html>
Related
I am trying to create a hero image with text on top of the image. I wanted to create this using mostly bootstrap 4 so I don't have to write a lot of CSS. Bootstrap card has an image-overlay class that helps put text over the image. so I am halfway there thanks to bootstrap, But I am having some issues on mobile and other things. Did i reach the bootstrap limit and need some CSS? or I can modify my bootstrap code and fix these issues below
example image
Problems
on mobile texts and buttons are going outside the image, I want to keep it inside the image
how can I make the "card-image-overlay" left centred like the example (see example image). I
made it left, not centred.
I put w-25 on text and button parent div so that I can control the width and the div stays on the left even if the texts are long (like the lorem ipsum text on example)
my 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>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="container">
<div class="card bg-dark text-white">
<img class="card-img img-responsive" src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay ">
<div class="text-left w-25 ">
<h2 class="card-title "> Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
The w-25 class isn't responsive (it's 25% width on all screen widths), but the grid classes (row>col*) are responsive. Instead use a row > col-* inside the card, and use the responsive col widths as needed. For example, col-lg-3 col-sm-6 is 33% width on lg and up, 50% width on md and sm, and then becomes full width on xs (mobile).
<div class="card bg-dark text-white">
<img class="card-img img-responsive"
src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?cs=srgb&dl=bloom-blossom-close-up-87840.jpg&fm=jpg" alt="Card image" width="500px" height="500px">
<div class="card-img-overlay d-flex align-items-center">
<div class="row">
<div class="text-left col-lg-3 col-sm-6">
<h2 class="card-title ">H2 Locations Headline</h2>
<p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="">
CTA to Our Locations
</div>
</div>
</div>
</div>
</div>
Use d-flex align-items-center on the card-img-overlay to vertically center the row.
https://www.codeply.com/go/eRpRZj9Z8M
I tried, having a modal inside a footer section of a page (using materialize css). On clicking the modal, it pops up and shows a materialize collection. But once I close the pop up, the modal button , sort of freezes , and only if i move my cursor over it , it regains it original color.
As in the image, the modal button looks like it's inactive(whitish blue color) and if I move my mouse over it, it regains its original color.
Here's my code:
$(document).ready(function() {
$('#modal1').modal();
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<footer class="page-footer black">
<div class="row">
<div class="col s1 m1">
<div class="footer-copyright">
<div class="container" id="copyright">
© copyright text
</div>
</div>
</div>
<div class="col s11 m11">
<!-- <div class="row" id="modal"> -->
<a class="waves-effect blue waves-light btn modal-trigger" href="#modal1">Modal</a>
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<div class="collection">
<h2 style="color:black;">Text Analysis</h2>
item 1
item 2
item3
</div>
<div class="modal">
Close
</div>
</div>
</div>
</div>
</div>
</footer>
How do I rectify this glitch?
As stated in this ISSUE, the issue is given by the double inclusion of javascript files in your <head>.
Remove the older version in order to make it work..
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
I have the following code. I want to resize my image, but it doesn't work with col-xs-offset-0. (I want to center it)
What could be the problem here? I want my image to get big with col-xs and centered.
I don't want to use col-xs-4 since it'll make my image too small. I can't col-xs-5 because then I can't use offset.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-0">
<img class="img-responsive" src="http://www.turkcealtyazi.org/images/poster/0903747.jpg" alt="">
</div>
</div>
</div>
<script src="/js/jquery-2.1.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Fiddle : http://jsfiddle.net/rx4ptj2k/
An offset of zero would only be appropriate if you had a width of 12. As it's 6 columns wide, you'd divide the remainder of the 12 in half for a result of 3.
Use col-xs-offset-3 instead of col-xs-offset-0.
Demo
I'm trying to create a simple HTML document that has two main divs - the first one has a background image w/a background size of cover so that the image takes up the entire top portion of the screen, the second div is directly beneath the first div and contains an img tag.
This seems simple enough, but when I apply a background:url style to my first div, scrolling down causes my second div image to overlap the background image of the first div. I expected this so I set a height property in my first div and this has no effect.
How do I make the first image cover the first div but not have the second one overlap it?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="font-family: 'lato'; font-size:18px;">
<div class="container-fluid">
<div style="background:url('http://www.screensavergift.com/wp-content/uploads/2011/01/BeautifulLakeView1.jpg') no-repeat center center fixed; background-size:cover; height:1100px" class="row">
<div class="row">
<div style="margin-top:20px" class="text-right col-xs-offset-1 col-xs-10">
Login | Sign Up
</div>
</div>
<div class="row">
<div style="background-color:rgba(62,83,78,0.2); margin-top:10px" class="text-center col-xs-offset-1 col-xs-10">
<span style="color:white; font-size:40px;">
Join us in God's country!
</span>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<img src="http://www.ynaija.com/wp-content/uploads/2014/05/Bird.jpg" alt="Cyrillic alphabet" />
</div>
</div>
</div>
</body>
</html>
See an example of what I'm trying to do here:
http://jsfiddle.net/y0oL6k4d/
I'm trying to figure out how to set the order of my containers in a page so that they will correctly reorder themselves in both mobile and desktop layouts when resized.
Here is my code, the order is correct here in tablet [col-sm] & and phone [col-xs] views:
<!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.0">
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
div {border:1px solid #000;}
div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
div.rider {height:50px;background-color:#06C;}
div.search {height:50px;background-color:#F39;}
div.headers {height:100px;background-color:#933;}
div.navigation1 {height:300px;background-color:#69F;}
div.content {height:600px;background-color:#0FC;}
div.social {height:50px;background-color:#C99;}
div.navigation2 {height:300px;background-color:#3FF;}
div.footer {height:150px;background-color:#000;}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 logo"></div>
<div class="col-md-3 col-xs-12">
<div class="rider">rider</div>
<div class="search">search</div>
<div class="navigation1">1st Nav</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="headers">headers</div>
<div class="content">content</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
The problem is for a desktop layout, there is a big gap under the 1st Nav div, the social div should be immediately beneath the 1st Nav in desktop and larger views regardless of the height of the content div.
How do I fix this? I tried using the pull, push, offset and float methods, but nothing gave me the correct results.
The gap that you are talking about is actually not a gap in the solid left column. It is a gap between content in the left column of first row and the left column of the second row.
Your last wrapping div (social/nav2/footer) is in the second row, so it can touch the first wrapping div (rider/search/nav1) from below only if the height of second wrapping div (headers/content) is less than of first (which is definitely not an option here).
To fix the problem, I'd suggest to put contents of last wrapping div into first one. However it will break the order in mobile and tablet layouts.
As the second option I could offer to duplicate contents of last wrapping div to first one, but make it visible only in desktop screen sizes by using .visible-md and .visible-lg classes on upper instance and to show the one below only in mobile screens (use .hidden-md .hidden-lg classes). This is not the best idea from performance standpoint (extra traffic, extra server-side processing) but it could work.
<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.0">
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
div {border:1px solid #000;}
div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
div.rider {height:50px;background-color:#06C;}
div.search {height:50px;background-color:#F39;}
div.headers {height:100px;background-color:#933;}
div.navigation1 {height:300px;background-color:#69F;}
div.content {height:600px;background-color:#0FC;}
div.social {height:50px;background-color:#C99;}
div.navigation2 {height:300px;background-color:#3FF;}
div.footer {height:150px;background-color:#000;}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 logo"></div>
<div class="col-md-3 col-xs-12">
<div class="rider">rider</div>
<div class="search">search</div>
<div class="navigation1">1st Nav</div>
<div class="visible-md visible-lg">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="headers">headers</div>
<div class="content">content</div>
</div>
<div class="col-md-3 col-xs-12 hidden-md hidden-lg">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>