I am using Bootstrap. In the following markup, when the browser window width is reduced to minimum, image spills over and not totally 100% visible.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<h1 style="display:inline;">Some heading here</h1>
<img src="http://feedsinsight.com/Content/logo.png" style='height:38px;vertical-align:bottom;float:right;' />
</div>
</div>
How can I fit it?
You should use bootstrap's img-responsive class with a max-height rather than a fixed height to make the image scale nicely on small screens.
Bootstrap also has a convenience class pull-right which you can use instead of apply the float style inline.
<div class="row">
<div class="col-xs-12">
<h1 style="display:inline;">Some heading here</h1>
<img class="img-responsive pull-right" src="http://feedsinsight.com/Content/logo.png" style='max-height:38px; vertical-align:bottom;' />
</div>
</div>
Here's a bootply example: http://www.bootply.com/x9KQXFqkGr
You should use min-width and max-width or make "height:38px" to height 100%. Using % values is more responsive than specifying pixels.
Use class="img-fluid" this works in Bootstrap 4. It sets max width to 100%. The height of image is set to auto.
Related
I'm having trouble with making some of my div elements responsive.
The image with the magnifying glass is refusing to resize when the window is smaller, for example on a ipad. I have tried other methods of resizing but resulting in failure.
Website link: http://onlinestaff.net
Problem: The magnifying-glass-image on your website uses the attribute max-width:none which causes the image to be displayed in full size even on smaller screens.
Solution: When making images responsive we usually use the CSS attribute max-width:100% to ensure that big images scale down to fit on the screen (or better: fit into the parent container)
You can try something like this to make divs responsive and their position relative to the size of screen:
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
This is the code I wrote using Bootstrap:
<div class='container-fluid' >
<div style='background-color:#24242a;height:20vh;margin-top:10%;left:0;margin-left:0%;'>
<div class="row" style='padding-top:20px;width:100%;' >
<center><h1 style='font-weight: 400;letter-spacing: 0.05em;color:#E4D5D5;'>CINE SUNTEM <span style='font-weight:bold;'>NOI?</span></h1></center>
<div class="col-xs-6 col-sm-4 col-lg-4">
1
</div>
<div class="col-xs-6 col-sm-4 col-lg-4">
2
</div>
<div class="col-xs-6 col-sm-4 col-lg-4">
3
</div>
</div>
</div>
</div> <!-- END CONTAINER -->
But the div is only 80% the width of the screen and centered. How can I make it 100% width? I will appreciate all answers.
The class container-fluid is not supposed to be full width. If you want to e.g. add a background color that stretches to 100% width of the window I suggest you make a wrapper div outside of the container-fluid:
<div style="width:100%; height: 600px; background-color: red;">
<div class="container-fluid">...</div>
</div>
The container-fluid class is just a fluid container as an addition to the normal container class from Bootstrap. I have used this many times and it should work! Try the code above to check it out.
EDIT
The OP used the code above to introduce a full-width container with Bootstrap. He also had the additional problem of having a parent div, which already had the container class. Beware of this as the parent can also additionally limit the ability to introduce full-width window divs.
I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.
I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.
I have a problem with Bootstrap css. I have a panels with header, body and footer. The body contains an image. Each of the images have been resized to the same 700px width and 450px height. Yet the panels end up different sizes with the footer not being aligned to each other.
How can this be fixed?
.cshtm code:
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">
Visual Similarity Duplicate Image Finder
</div>
<div class="panel-body">
<a href="portfolio-item.html">
<img class="img-responsive img-blog img-hover" src="#ViewBag.AccreditationImage2" alt="">
</a>
</div>
<div class="panel-footer">
<p>Accreditation test Progress: 10%</p>
<p>Version: 5.5.0.1</p>
<p>Vendor: MindGems, Inc.</p>
</div>
</div>
</div>
and the ubiquitous image:
UPDATE
It turns out the natural height of the images are indeed different even though they were all resized the same. Anyway, how can I force the images in the panel to all be the same size?
Can't tell what is happening in your case specifically without seeing the css but you should just be able to set the height attribute on the image or container:
<style>
.panel-body {
height : 450px
}
</style>
or:
<style>
.panel-body img {
height : 450px
}
</style>