Here is a link to the site I am currently having issues with:
Link to the Site
as you can see at a full-size window, everything looks quite nice - like a twisted my senses graphic. And now:
As the width of the browser window falls below 1200 pictures (humanoids) "descend" one after the other.
What to do and how to do your photos to a resolution of 768px scale all like their background?
What to do and how to below 768px resolution photos arranged themselves one after another and the lyrics appeared next Featured click on a puppet loaded text using js.
I would be grateful for any suggestions.
Check the bootstrap documentation for its grid system here: http://getbootstrap.com/css/#grid-example-mixed-complete
There are 4 different types of classes col-sm col-xs col-md col-lg each one fitted for different screen sizes and you can combine them to make dynamic grids for your site.
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
</div>
For example the code above has different behavior on small, medium and large screens. The columns resize according to the screen size. On your source code you are only using col-lg type cols.
Since your code is not posted, and you asked for suggestions, I will give you the ones I have. first if your images are moving below each order when you go below a certain screen size/width it is because you wrote code to do that or at least you are not properly using bootstrap. Add a class of img-responsive to your images. It is a bootstrap class that helps you with image responsive designs.
Add a class of col-sm-3 to divs surrounding the images or to the images themselves, it will keep them close on one line for from lg desktops to tablets. if you want the same thing for mobile, you had a class of col-xs-3
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
Related
I use bootstrap 3.3.7 for its grid and responsiveness in my web app (Flask App). It works pretty well with all the plotly subplots I created except for a single plot. When the browser is in full-page or if I resize a little bit, I don't have any problem :
However, if I resize too much the plot exceeds the section height and generates a white space.
I have tried to add a margin-right, a padding-right, to change the class of the div col-lg-6 col-md-6 col-sm-6 into col-lg-6 col-md-6 col-sm-6 col-xs-6 (the chart become very very small), to change the margin inside the javascript code that produces the plot...
And as you can see the subplots in the below the GREEKS title are well displayed whatever the resize applied...
Here is the html code for this section :
<section id="payoff" class="background-img">
<!-- Table code here -->
<div class="container-fluid" id="results">
<div class="row" style="padding-top: 0px; padding-bottom: 30px;">
<div class="col-lg-6 col-md-6 col-sm-6" style="padding-top:40px;">
<div class="plotly-graph-div" id="plot-payoff"></div>
</div>
</div>
</div>
</section>
Any help would be really appreciated! Thanks a lot
I'm developing a website and ran into an issue Here
The service image all have a small amount of white space between them and the bottom of the container. I've searched SO and have seen similar issues (but it wasn't apparent they were using bootstrap or some responsive framework) and have also used firebug to figure out what is causing the issue (and have tried implementing the suggestions found on the other posts)...
I'm not sure if the issue is a class (firebug says no), or if it's just the combination of the ".img-responsive" class and the dimensions of the image.
If anyone could take a look and lend some insight to this it would be extremely helpful and greatly appreciated. Thanks!
The HTML where the issue is found is below:
.service-img-bg {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 service-img-bg pull-right">
<figure class="imghvr-slide-left">
<img class="img-responsive service-main-img hidden-md" src="media/services-icons/offered-service-img.png" alt="Hologlass">
<img class="img-responsive service-main-img visible-md" src="media/services-icons/offered-service-img-sm.png" alt="Hologlass">
<figcaption>
<a class="video-image playVideo" href="https://www.youtube.com/embed/Q4QI3VyC5p4?rel=0&showinfo=0" data-toggle="lightbox" data-title="3D Mapping Demonstration">
<i class="fa fa-search overlay-icon"></i>
</a>
</figcaption>
</figure>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow slideInLeft pull-left service-text-bg-img">
<div class="col-md-12 service-text-container">
<h5 style="padding:0 0 15px;">HOLOGRAPHIC</h5>
<p>Our method of applying specialized light absorbing film-- and in some high-ambient lighting situations, low voltage autodimming electrochromic film-- to a transparent substrate of glass, acrylic or polycarbonate transforms these common surfaces into
a display that truly commands stopping power. We’ve developed a solution that is a head turning alternative to traditional digital signage that is suitable for storefronts, wayfinding and interactive multi-touch or touchless concepts.
<br>
<br>Our lineup offers a full range of rear, front & dual projection applications. Both rigid and film based surfaces custom built to spec, with additional iturnkey installation services your project which include specialty mounting, adhesions and
even massive ‘Holoboard’ structures up to 40 feet wide.</p>
<div class="page-scroll">
<a href="#footerBlock" class="inquire-link">
<button class="inquire-btn">INQUIRE NOW</button>
</a>
</div>
</div>
</div>
[class^="imghvr-"], [class*=" imghvr-"] make this class's property display: block, instead of display: inline-block
See here it solved http://prntscr.com/d57tkc
Well #Jim Fahad is not 100% correct, you do not need to set the img display:block, you just need to make the img block element - thus to suppress the default display:inline or display:inline-block.
To do that you can set display:block as mentioned, but also display:table or display:flex will work, or even for example float:left.
I have a website about products. Each product article has text and some images in it. The images range from 400px width to some going up to 700px width. The product article is stored in a SQL Server database and the article is fetched dynamically based on the productid.
I am using Bootstrap to make my website mobile friendly. I have a two column layout. The product article is contained in a Div marked with a
class="col-md-12 row"
When I shrink the size of the page to preview how it would look in a mobile device the text nicely adjusts itself, however the images don't. Now i have about 3000 such images and if there is an attribute that I have to apply to every individual image tag, that won't be feasible.
Is there any other way using CSS or bootstrap or javascript where I can reduce the size of the image for a device size, keeping the image aspect ratio intact ?
Just add this somewhere in your stylesheet and it will apply to all images on your site.
img {
display: block;
max-width: 100%;
height: auto;
}
Bootstrap v3 and below.
Use class="img-responsive" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class.
Ex: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_responsive&stacked=h
Bootstrap v4
Use class="img-fluid" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class. see comment below for more details
With a Specific Width:
<img src="assets/img/why1.png" style="max-width:20%;" alt="...">
Automatic Width:
<img src="assets/img/why2.png" class="img-fluid" alt="...">
Try to this.
<div class="row">
<div class="col-md-4">
<img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>
Try adding this to css
.col-md-12 img {width:100%}
#imgdiv { width:40vw;display:table-cell;vertical-align:middle; text-align:center;}
img {max-width:100%;height:auto;max-height:100%;}
<div class="row">
<div id="imgdiv" class="col-sm-5 text-center">
<img class="thumbnail img-responsive" src="https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
style="maxwidth:100%;height: auto;max-height: 100%;">
</div>
</div>
I have several images in a grid. I want each image to overlay to fullscreen when I click on them.
I have this javascript on there, but when I click on the image the one that overlays is the last image on the grip. How should I fix that?
I'm using this, but I have several images:
http://jsfiddle.net/a8c9P/
The only the difference on mine from this is that it is in another div for another javascript that puts it into the grid.
HTLM:
<div class="brick">
<div class="overlay"></div>
<div class="overlayContent">
<img class="imgBig" src="img/Scan.jpg" />
</div>
<img class="imgSmall" src="img/Scan.jpg" height="345">
</div>
check out this
are you trying for this? http://jsfiddle.net/Lqsmr4bu/
I've only just started learning so please stick with me and I'll try provide as much info as I can.
Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.
I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.
Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
Above is my html, the second content area has the large amount of copy
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
Thanks for any help / advice
You can try using CSS negative margins (no jQuery needed)..
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
http://bootply.com/92230
EDIT - another option
Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437
Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more.
Just add this class on your current row like this:
<div class="row row-eq-height">
your columns
</div>
Warning: You have to add a new div.row.row-eq-height each 12 columns
You can use this plugin. It works pretty good.