I'm trying to develop a website with Materialize and there is a slider in site. Materialize is responsive and working well at various resolutions. However, When I decrease the screen size, the slider width is decreasing as well (as it should be). But the image in it just getting cropped instead of scaling it to the size of the slider. I added the responsive-img class to the img but nothing changed.
Slider code
<div class="slider">
<ul class="slides">
<li>
<img src="images/slider/slide_1.jpg">
<div class="caption center-align">
<h3>Eraltek Kurumsal</h3>
<h5 class="light grey-text text-lighten-3">Sitemize hoşgeldiniz</h5>
</div>
</li>
<li>
<a href="panoramic/panoramic.html">
<img src="images/slider/slide_2.jpg">
<div class="caption right-align">
<h3>Eraltek Mağaza</h3>
<h5 class="light yellow-text text-darken-1">360 derece mağaza turu için tıklayınız</h5>
</div>
</a>
</li>
<li>
<img src="images/slider/slide_3.jpg">
</li>
<li>
<img src="images/slider/slide_4.jpg">
</li>
<li>
<img src="images/slider/slide_5.jpg">
</li>
</ul>
</div>
Try to define in your css file
.slider .slides li img {
background-size:100% auto;
background-repeat: no-repeat;
}
You should try adding a css
max-width : 100%;
to the <img> tag. Hope this will resolve the issue. Also don't forget to add responsive-img class to <img>
Use img-responsive class with img tag.(you are using responsive-img, It is a bootstrap class. It is not working in materialize design)
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Try
.slider li img{max-width:100%;height:auto;}
Related
I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).
My Code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<ul class="off-canvas-list">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation">
<a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</ul>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
.zurb-links li{
display:inline;
}
.sideBar{
height:100%;
position:fixed !important; /* added !important just for the snippet to work. not needed for live production..
}
<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
<div class="row ">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
<div class="icon-bar vertical five-up" role="navigation"> <a class="item">
<img src="../assets/img/images/fi-home.svg" >
<label>Home</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-bookmark.svg" >
<label>Bookmark</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-info.svg" >
<label>Info</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-mail.svg" >
<label>Mail</label>
</a>
<a class="item">
<img src="../assets/img/images/fi-like.svg" >
<label>Like</label>
</a>
</div>
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).I have been able to position the icon bar how I want it, with the exception that it displaces the entirety of the page. What is there a class or something I could use to prevent this? Also, I have a footer as you might see, but it is not black as it is from the foundation website that I took the code from (yes I plan on editing this code, I am just in the learning phase right now).</p>
<div class="zurb-footer-bottom">
<div class="row">
<div class="medium-4 medium-4 push-8 columns">
<ul class="home-social">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="medium-8 medium-8 pull-4 columns">
<ul class="zurb-links">
<li>About</li>
<li>Blog</li>
<li>News<span class="show-for-medium-up"> & Events</span></li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
<p class="copyright">© 1998–2014 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.1/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Fiddle.
If you want to fix your side bar in your web page you have to go with position:fixed.
The problem that one faces by doing this is that rest of the columns are relatively positioned -they go under the side-bar or on top of it(including the footer if you span to 100% width).
In the fiddle i gave a span of small-4 and medium-2 columns for side-bar , small-8 and medium-10 small-push-4 medium-2-push columns for content and nested footer in to this.
As the side-bar has position:fixed the content column(position:relative) stacks underneath it so i push the columns based on the span of side-bar.
<div class="row ">
<div class="small-4 medium-2 columns sideBar">
<ul class="side-nav">
....
..
</ul>
</div>
<div class="small-8 medium-10 small-push-4 medium-push-2 columns">
<p>Your content</p>
.....
...
<div class="zurb-footer-bottom">
....
..
</div>
</div>
</div>
I had a similar problem. Here is my solution:
HTML-Code:
<body>
<!-- Header content "top-bar" ... -->
<div class="icon-bar vertical side_fixed hide-for-small-only">
<a class="item">
<label>Menuitem 1</label>
</a>
<a class="item">
<label>Menuitem 2</label>
</a>
<a class="item">
<label>Menuitem 3</label>
</a>
</div>
<div class="admin_content">
<!-- Main-Content "row" "column" ... -->
<!-- footer -->
</div>
<!-- scripts -->
</body>
SCSS-Code: (CSS similar)
#media #{$medium-up} {
.side_fixed {
left: 0;
top: $topbar-height;
bottom: 0;
position: fixed;
width: 8rem;
max-width: 8rem;
overflow-x: hidden;
}
.admin_content {
margin-left: 9rem;
}
}
This is my code for footer section:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/article-logo.png" alt="img"/></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li><a href="#">COLUMN</li>
<li><a href="#">TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="img/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title-1">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here. ></a></p>
</div>
<div class="footer-column2">
<img src="img/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title-2">Shopify Expert</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
This is my JSfiddle what i tried:
http://jsfiddle.net/u89q6cyz/
Now my page look this:
http://s13.postimg.org/js23ca6nr/Untitled_1_copy.png
Now i need to display the footer-content as i marked in my image in the right side of the image.
I tried all possible ways.. I don't know how to fix..
Can anyone help me?
You have to do two modification in your CSS code.
Remove the margin-left on the following class.
.footer-column2
{
/*margin-left: 112px !important;*/
}
Add width:50% for your footer columns.
.footer-column1,.footer-column2
{
float:left;
width:50%;
}
DEMO
Hi so I'm working on a site with an image gallery and I decided to use a Codeigniter and a library called Image CRUD for some of the backend stuff, and Twitter Bootstrap for the front end. Its pretty basic stuff. The problem is Image CRUD generates a lot of its own code for the front end so I'm having trouble getting it to look the way I want. Im trying to make a responsive gallery that resizes and stays centered on a bunch of different devices. This should be a piece of cake with bootstrap, but for some reason it just won't work. Any help would be greatly appreciated!
Heres the code for the images that Image CRUD outputs:
<ul class='photos-crud'>
<li id="photos_206">
<div class='photo-box'>
<img src='link_to_thumb__b551b-6.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_203">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_204">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_205">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_202">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_201">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
</ul>
The issue may be with your image width/height having exact dimensions. If you can get rid of that and let bootstrap take over, that'd be great. Responsive images are usually 100% of the parent width and that parent having a percentage of something else. Maybe you can use SASS to #extend bootstrap styles into the generated elements so..
.photos-crud { #extend .row }
.photos-crud > li { #extend .col-md-3}
Something like that will setup the grid for laying out the images, then if you can remove the auto-generated dimensions, great, but if not maybe use !important to override the dimensions like..
.photos-crud > li img {width:100% !important; height:auto !important;}
I have a page developed using twitter bootstrap version 2. I have a row that is divided into span8 and span4. Span8 has some image slider (built with jquery) and span4 has just some links. When the page loads, all the links in the span 4 is displayed first and then when the image loads, the text gets pushed to right. Is there a way to prevent this shift/jump effect?
<div class="row-fluid">
<div class="span8" id="imgDiv">
<!-- Image slider goes here -->
</div>
<div class="span4" id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
</div>
I have devised the following solution. Here's a JSFiddle: http://jsfiddle.net/sJq6y/
HTML
<div class="container">
<div class="row-fluid">
<div class="span8">
<div class="imgDiv">
<h1> Image slider goes here </h1>
</div>
</div>
<div class="span4 linksDiv">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Duo
</li>
</ul>
</div>
</div>
</div>
CSS
.linksDiv ul {
list-style:none;
background-color:lightgrey;
width:90px;
height:90px;
padding:10px;
}
.imgDiv h1 {
text-align:center;
color:tomato;
}
Images
Probably due to styling coming from #imgDiv and #linksDiv.
Would this option work for you?
<div class="row-fluid">
<div class="span8">
<div id="imgDiv">
<!-- Image slider goes here -->
</div> <!-- end #imgDiv -->
</div>
<div class="span4">
<div id="linksDiv">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div> <!-- end #linksDiv -->
</div>
</div>
Good luck!
Following the example of TB, I have a navbar that is marked up as follows:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
</div>
I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.
I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?
Just change the class container to container-fullwidth like this :
<div class="container-fullwidth">
Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
...
</div>
I put together a jsFiddle as an example.
Put the navbar out of your container:
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
<div class="container">
</div>
EDIT:
Here is one that I did with responsive navbar. The code fits the document body:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Link</li>
<li class="divider-vertical"></li>
<li>Link</li>
</ul>
<ul class="nav pull-right">
<li>Log out</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div> <!-- end container -->
<script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
I'm very late to the party but this answer pulls up top in Google search results.
Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width.
Like so:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>More Stuff</li>
</ul>
</div>
</div>
</div>
Put your <nav>element out from the <div class='container-fluid'>.
Ex :-
<nav>
......nav content goes here
<nav>
<div class="container-fluid">
<div>
........ other content goes here
</div>
</div>
You need to push the container down the navbar.
Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/
<header>
<h2 class="title">Test</h2>
</header>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
</div>
Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides.
I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.
You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important is needed just in case you link the bootstrap.css after your custom css.
And add your nav html out of a .container
To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.
Here is the solution to your question
<div class="container">
<div class="navbar">
<div class="navbar-inner col-md-12">
<!-- nav bar items here -->
</div>
</div>
</div>