I am currently designing a site that works fine on Chrome, FF, & IE 9,10 but when I view the site in IE8 thru browserstack it renders terribly.
Code of the section:
<div id="retail_locate" class="container">
<div class="row">
<div id="retail_btn" class="col-md-4 text-center hidden-sm hidden-xs">
<button type="button" class="btn btn-default"><span class="btn-text">Find A Local Retailer</span><span class="icon-map-marker"></span></button>
</div>
<div class="col-lg-8 text-center">
<div class="row">
<br>
<div class="col-md-4 col-sm-4 col-xs-6 ">
<img class="img-responsive shadow" src="images/retailers/retail1.jpg">
</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<img class="img-responsive shadow" src="images/retailers/retail2.jpg">
</div>
<div class="col-md-4 col-sm-4 hidden-xs">
<img class="img-responsive shadow" src="images/retailers/retail3.jpg">
</div>
</div>
<br />
<div class="row hidden-sm hidden-xs">
<div class="col-md-4">
<img class="img-responsive shadow" src="images/retailers/retail4.jpg">
</div>
<div class="col-md-4">
<img class="img-responsive shadow" src="images/retailers/retail5.jpg">
</div>
<div class="col-md-4">
<img class="img-responsive shadow" src="images/retailers/retail6.jpg">
</div>
</div>
<br />
</div>
</div>
</div><!-- .container -->
I'm using Bootstrap 3. I think whats screwing this up is the col-lg,md etc. The grid is not in effect.
Images:
http://i.imgur.com/qF4ebPJ.png
http://i.imgur.com/BzLZBG6.png
Any help would be amazing. This is my first post on Stack and I've searched everywhere for fixes. I included html5shim and respond.js in my header.
<!--[if lt IE 9]>
<script src="js/html5shiv/dist/html5shiv.js"></script>
<script src="js/dest/respond.min.js"></script>
<![endif]-->
I changed the doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and even added the meta tags
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE8 does not reconginse media queries and this is probably why nothing is working. The code I have used in the past and works fabulous is this:
https://code.google.com/p/css3-mediaqueries-js/
Check the non-js solution:
https://github.com/dizzyn/bootstrap-grid-desktop-first
It's a Grid Css Patch
Related
thumbnail screenshot also attachedi have created thumbnail in my dashboard.but these thumbnails are collapsing each others and the last thumbnail in a row showing up full screen.kindly help me
<div class="container">
<h1>Trending Groups</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
</div>
</div>
Try giving height and width to your image also dearch in google little bit and then post your questions on this that will help you.
here's the issue:
Using Bootstrap 3.3.7
I have 6 images (3 icons and 3 progress bars) and wish to have the 2 last ones go to the next line when reducing the window size from col-lg to col-md (making my site as responsive as possible.) The issue is that it does not, here's the code:
<!DOCTYPE html>
<html>
<head>
<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<section>
<div class="container langages" id="skills">
<div class="row iconskills">
<!-- HTML -->
<div class="col-xs-6 col-sm-offset-1 col-sm-1 col-md-offset-1 col-md-1 col-lg-offset-1 col-lg-1">
<img class="logohtml" src="img/logos/html5.png" alt="logo html5" />
</div>
<div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3"></div>
<!-- CSS -->
<div class="col-xs-6 col-md-offset-2 col-md-1 col-lg-offset-0 col-lg-1">
<img class="logocss" src="img/logos/css32.png" alt="logo css3" />
</div>
<div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3"></div>
<!-- BOOTSTRAP -->
<div class="col-xs-6 col-sm-1 col-lg-1">
<img class="logobs" src="img/logos/bootstrap.png" alt="logo bootstrap" />
</div>
<div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2"></div>
</div>
</div>
</section>
<footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</footer>
</body>
</html>
I added 2 screenshots showing what is happening:
Before
After
What is strange is that bootstrap has a grid made of 12 columns, when I check in my divs in col-md I have those 12 columns in my first 4 divs (which is what I want since I want the 2 last to go to the next line) but the behavior is not what I'm expecting.
I'm probably missing something obvious but help would be great, thanks !
Don't hesitate if I'm not clear or missing some infos.
I think you are trying to achieve below layout. My views are that you should get familiar with bootstrap built in components(classes). I have changed little bit code of yours, you can further edit it and reference your correct path for images.
Bootstrap 3.3 : https://getbootstrap.com/docs/3.3/components/
Some reference css links that I have used in build
Progress bar : https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
Grid : https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Image responsive : https://www.w3schools.com/bootstrap/bootstrap_images.asp
HAPPY CODING : All the best for you resume, do share the link once it is completed.
<!DOCTYPE html>
<html>
<head>
<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<section>
<div class="container langages" id="skills">
<div class="row iconskills">
<!-- HTML -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logohtml" src="./img01.png" alt="logo html5" />
</div>
<div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
<!-- CSS -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logocss" src="./img01.png" alt="logo css3" />
</div>
<div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
<!-- BOOTSTRAP -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logobs" src="./img01.png" alt="logo bootstrap" />
</div>
<div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
Thanks a lot for your answer!
The simple fact of adding a new div around each languages helped me sort my problem out!
Thanks again!
So i have recently picked up a site from a friend and i am in the process of rebuilding it using the original bootstrap v3 that was originally put in place. I have added the .collapse class onto a div to hide it away until clicked but when it is clicked the box doesn't stay open just drops down and then immediately goes back to being closed.
If i watch the steps of what happens using the inspect tool in chrome i can see the class starts as 'collapse' changes to 'collapsing' and applies the css styles relevant and then finishes as 'collapse in'. However the box has closed and the 'collapse' class is back to being applied to the div even though it is displaying as 'collapse in'.
<div class="collapse" id="facebookreviews">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-2">
<imgsrc="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
</div>
</div>
<div class="spacer-25">
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button class="btn btn-black" type="button" data-toggle="collapse" data-target="#facebookreviews" aria-expanded="false" aria-controls="facebookreviews">Click to view more
</button>
</div>
</div>
.collapse {
display: none;
&.in { display: block; }
.collapsing {
position: relative;
height: 0;
overflow: hidden;
#include transition-property(height, visibility);
#include transition-duration(.35s);
#include transition-timing-function(ease);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
!https://i.imgur.com/veYWYoZ.png
I loaded your HTML into a file, put the CSS in a CSS, and linked the CSS...
I also put bootstrap 3 css in at the top and jquery and bootstrap.js files in a script tag at the bottom...
I was able to get them to collapse just fine both with putting your collapse div with a container and without a container class.
is jquery and bootstrap.js loaded at the bottom?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="testing.css">
</head>
<body>
<div class="container collapse" id="facebookreviews">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-2">
<imgsrc="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
</div>
</div>
<div class="spacer-25">
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button class="btn btn-black" type="button" data-toggle="collapse" data-target="#facebookreviews" aria-expanded="false" aria-controls="facebookreviews">Click to view more
</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Collapse Working
Collapse Working Pt 2
I am a beginner with WordPress.
I have a HTML/BOOTSTARP "One page" template which has a gallery built with Lightbox CSS/JS.
Refer the template link here.
I have integrated this theme to WordPress and everything works fine.
Now, I would like to upload pictures to this existing gallery using WordPress.
A post creation is giving me options to upload this as a new post.
I have 8 portfolios and would like to add several pictures to specific portfolios from WordPress so that it could be automatically uploaded.
Please be reminded that this is a One page website.
<section id="portfolio">
<link href="css/lightbox.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="heading text-center col-sm-8 col-sm-offset-2 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<h2>Our Gallery</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/1.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<h3>gallery</h3>
<p></p>
</div>
<div class="folio-overview">
<span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span>
<span class="folio-expand"><i class="fa fa-search-plus"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="folio-item wow fadeInLeftBig" data-wow-duration="1000ms" data-wow-delay="400ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<!-- <h3>Time Hours</h3>
<p>Design, Photography</p>-->
</div>
<div class="folio-overview">
<span class="folio-link"><a class="folio-read-more" href="#" data-single_url="portfolio-single.php" ><i class="fa fa-link"></i></a></span>
<span class="folio-expand"><i class="fa fa-search-plus"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="folio-item wow fadeInRightBig" data-wow-duration="1000ms" data-wow-delay="500ms">
<div class="folio-image">
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/3.jpg" alt="">
</div>
<div class="overlay">
<div class="overlay-content">
<div class="overlay-text">
<div class="folio-info">
<!--<h3>Time Hours</h3>
Code for the portfolio
Kindly help me with your suggestions on how to do it.
Firstly
<img class="img-responsive" src="<?php bloginfo('template_directory') ?>/img//portfolio/2.jpg" alt="">
<i class="fa fa-search-plus"></i>
has double slash "//" which leads to not finding the actual file.
Besides that, have you checked that Lightbox CSS and JavaScript file are loaded properly? See the console if there is any error.
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.