i'm create a page for web survey using boostrap, because i want my design still same in laptop/computer when access in Tablet or handphone.
But i have found problem, when resize browser
This my web when size browser >= 995px
[![enter image description here][1]][1]
But when resize <= 990px
[![enter image description here][2]][2]
I don't know solution how to fix this problem
This is my code
<div class="container-fluid" >
<div class="row">
<div class="col-md-4 col-sm-4 lk-back">
</div>
</div>
In codepen
Help me thank's
Try img-responsive class in the img tag
<img class="img-responsive" src="path/to/image" />
a is not a block element by default.
a {
display: block;
}
But you should not apply bootstrap classes to your normal elements. Use the bootstrap classes just for the layout to avoid problems like this.
Related
I want to add two images in a single row on my home page made using html css and bootstrap what should be the size of those images(in pixels). Please tell me how can I make those images responsive? Any help will be appreciated. Thanks.
Make 2 dividers in your HTML like:
<div class="row">
<div class="col-md-6 myfirstimageclass"></div>
<div class="col-md-6 mysecondimageclass"></div>
</div>
The class col-md-6 is a Bootstrap class, the other class myfirstimageclass is a self made class, place the images as background in your CSS and you are finished:
.myfirstimageclass{
background-image:url(yourfirstimageurl);
background-size:cover;
height:300px;
}
.mysecondimageclass{
background-image:url(yoursecondimageurl);
background-size:cover;
height:300px;
}
You should choose a reasonable size so they aren't huge is filesize.
Then use bootstrap's img-responsive class to make them response.
Here's a link to the bootstrap documentation for img-responsive.
I'm trying to center a styled responsive image, but it doesn't seem to work. After removing classes one-by-one, I'm finding that my class "portimage" seems to be breaking the responsiveness.
I don't want the images to be larger than 700px and I'd like them to have a light border around them.
Here's the code:
<div class="row mtmini">
<div class="col-lg-12">
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch1-Home.jpg">
<br>
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch2-Menu.jpg">
<br>
<img class="img-responsive center-block portimage" src="assets/img/CostcoSketch3-CC.jpg">
</div>
</div>
Here's the CSS for the class "portimage":
.portimage {
max-width: 700px;
border:1px solid lightgray;
}
Sorry if this is a dumb question--just starting out. I tried searching for this but I'm not finding a solution that addresses styling the image beyond centering and responsiveness. Thanks in advance!
It should be working fine, please double check if you have your CSS link to bootstrap properly inserted. Also, if you're using build tools like gulp/grunt try restarting the watch task.
Also, is 'mtmini' class adding any styles to the 'row' div?
If someone could take a quick look at this code and give advice, that would be much appreciated.
I have some images that resize correctly on both iPad and PC screens. However, as soon as you try it on a phone/reduce browser window size, the image does not resize correctly.
CSS:
.col-md-2 {
width: 16.66666667%;
}
HTML:
<div class="col-md-2 col-sm-4">
<div class="timeline-thumb">
<div class="thumb">
<img src="images/timeline6.jpg" alt="">
</div>
<div class="overlay">
<div class="timeline-caption">
<h4>Wrapping Services</h4>
<p>Click for more info</p>
</div>
</div>
</div>
</div>
The image is 170px wide, and there are 6 of them in a line, that all highlight in grey (via CSS) when you roll the mouse over them.
When i resize my browser to that of a phone, they get bigger than before!
Any advice much appreciated.
If someone is knowledgeable on the subject and can help please contact me and ill try to provide any info you need.
Thanks.
I'm trying to understand if you are using Bootstrap. If so, you should add a class for the small devices, try to add a col-xs-4 or col-xs-6 to the DIV element that is "col-md-2 col-sm-4" now.
Looks like Bootstrap. If so, add the img-responsive helper class to your image.
<img class="img-responsive" src="images/timeline6.jpg" alt="">
This will allow your image to scale proportionately and fill 100% width of the containing div regardless of viewport size.
I building a web application using the Bootstrap grid system as my layout. So far everything was working great but got into this issue where I have a div row that has a large image (width 1280px by height 150 px) and when you resize the page the image overlaps over divs.
To fix that I put a fixed height (height 150px) on my div and it stopped resizing and overlapping but I introduced a new problem. This nows throws off my layout and adds a vertical scrolling bar and I need my web app to fit the entire page only.
I was thinking of maybe adding a overflow: hidden to my CSS but seems a bit hacky to me. Just looking for advice and maybe a different approach to my layout. It seems that Bootstrap dosent play nice with fixed heights.
https://jsfiddle.net/DTcHh/9847/
<div class="container-fluid row-fluid" style="height: 100%;">
<div class="row grey" style="height: 10%;"> title of the website here </div>
<div class="row yellow" style="height: 150px; text-align: center;">
<img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" />
</div>
<div class="row grey" style="height: 60%;"> main content area </div>
<div class="row grey" style="height: 10%;"> footer area </div>
</div>
The way you are using bootstrap is not correct. Your are not manipulating bootstrap grid system properly. Your have put your image in a row but not in a column. You know you should have minimum one column(e.g. col-md-12) in a row. Then Bootstrap will consider your image or content perfectly. Refactor your code and follow the way bootstrap told you to do. Besides, you can make your image responsive using bootstrap's img-responsive class. See here: http://getbootstrap.com/css/#images-responsive
I think what you are looking for is this. This basically applies max-width: 100%; height: auto; and display: block; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
You can read more at http://getbootstrap.com/css/#images-responsive
Sample here: https://jsfiddle.net/qxLtmhat/
First you know you should have minimum one column(e.g. col-md-12 in a row) - see the first answer from Imran and second you hard coded the width and height - remove them and add the img-responsive class on the img.
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.