I am trying to create a contact section at the bottom of my bootstrap website, with a col-md-3 containing a picture, and col-md-9 beside it carrying the infomation
Except when i make the window smaller the text begins to overlap the picture instead of sitting under or beside it
I have tried making the image responsive, and looking at other ways of keeping it alongside but i cant figure out the issue.
Im sure i am missing something really simple, an would greatly aapprecite any help
I have searched this website for overlapping div issues, and tried a few things but nothing seems to work
<section class="contact bg-grey" id="contact">
<div class="container">
<h2 class="contact-header">Contact Me:</h2>
<div class="row">
<div class="col-sm-3">
<img src="img/me.png" class="responsive" id="bio">
</div>
<div class="col-sm-9" id="contact_details">
<h3 class="contact-header">John Gillespie</h3>
<p>Email: johngillespiexxx#gmail.com</p>
<p>Phone: 07xxxxxxxxx</p>
<p>Twitter: #jxhngillespie</p>
</div>
</div>
</div>
</section>
I was expecting when the page size shrinks that the image would shrink with it, or that the text would stay along side, until the screen becomes too small and then fall underneath. Instead of this happening the text begins to overlap the image
If you add style="max-width: 100%" to the img, it will prevent the image from overflowing outside of its column (the 100% is relative to the width of the column). By default, images always display at their full resolution unless you constrain them in this kind of way.
Related
I am new to Bootstrap, recently working on an Angular2 project, having a question to ask.
Currently I have a map-component left-hand side occupying 3 columns, however every time when I resize/shrink the browser, the image resizes/shrinks too. But I want the image to remain the fixed size whenever user resize the browser. So I delete the class="img-responsive" in the img tag. But those two components ended up overlapping when I shrink the browser. I am wondering why and could anyone please help me out.
For base app-component:
<div class="row ">
<div class="col-md-3">
<legend-component class="legend-component"></legend-component>
<map-component></map-component>
</div>
<div class="col-md-9">
<sidebar-component></sidebar-component>
<table-component></table-component>
</div>
</div>
For the map-component, I have the corresponding map-template to render my image:
<div align="center" >
<div class="row" id="images">
<div class="col-sm-12">
<img class="img-responsive" [src]=getImageSource() height="90%"/>
</div>
</div>
</div>
For normal full-screen sized browser:
Shrink the browser before disabling class="img-responsive":
Shrink the browser after disabling class="img-responsive":
If you want the image to stay to a certain size, I'd suggest defining a fixed width/height for the image. img-responsive resizes the image to the size of it's container's width.
Give the image a max width. The img-responsive mainly changes the picture's width.
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
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 the Grid System of Bootstrap 2.
I want to make a header with some text, and an image on the right of it.
Therefore I made a row, and put a span8 and a span4 inside of it.
However, when the window gets too small for the content to be displayed side by side, I want the span4 div to come before the span8 div.
<div class="hero-unit">
<div class="container">
<div class="row">
<div class="span8">
This is some text
</div>
<div class="span4">
<img src="image.png" alt="" />
</div>
</div>
</div>
</div>
How can I do this?
So in other words, how can I change the order of the divs.
If I'm not completely mistaking, there is no such thing described in the documentation.
You can do it with media queries and floats.
Should look somewhat like this:
<div class="span4 pull-right"><!-- Image here --></div>
<div class="span8"><!-- Text here --></div>
Now you should use a media query (as seen in the responsive.less file) to switch when the screen size jumps below a specific mark. Then you make sure that the span4's float is removed. You might need to use .row-fluid instead of the usual .row and use your own padding to make it look great.
This is the div for my product, you can see the demo like this:
<div class="productItem">
<div>
<!--image -->
</div>
<div>
<!--text -->
</div>
</div>
http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg
Each product has a product image and product text. The image is on the top, and the text is under each image. But you can see that, image can have different size, so I don't want the text always in the bottom instead of just below the image. How can I layout the text must in the bottom, except from assigning the absolute position.
It might be worth considering making your images a standard size. Perhaps a large and a smaller size? You could always have an option to show a larger image when someone clicks on the smaller one?
You could also simplify your HTML using something like this:
<div class="productItem">
<img class="large" />
<p>Text</p>
</div>
This would let you change the CSS depending upon the image (by giving it a class), and reduce unnecessary div's.
Perhaps force the image to display above the text using the block attribute?
img {display:block;}
I must be missing something because this seems fairly simple.
<style type="text/css">
.productItem {
text-align: center;
}
<div class="productItem">
<img src="whatever"><br style="clear: both;" />
Text
</div>
Perhaps there's more that I'm not understanding.
From your screenshot, it looks like your text is always below the image, but in the right half of your screenshot, when a small image is in the same row as a larger image, the text isn't lining up (the product descriptions aren't at the bottom of the cell). Is that what you're asking about? How to get the text all aligned to the bottom of the row when the image size varies?
You could set the table row that's containing all the products to be <tr valign="bottom">, which will push everything to the bottom, stacking the images on top of the text. This would mean that the small images would all have their bottoms aligned with each other, not their tops. If you want the images to stay up, but the text to go down, instead style the image DIV like this: <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. This will create a larger placeholder for smaller images such that the text beneath them all lines up, and if an image is too big, it will get cropped rather than stretch out and cause the text to get all out of line.
i assume you have a container for productItem
so it should be something like that:
<div class="productList">
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
</div>
i don't know why you dont want to use absolute positioning but that's only solution in this case (without giving fixed height to image or divs).
This setting would not hurt anything and will work on all common modern browsers including ie6.
All you need to do is give a different classname for product text or use different tag for addressing it.
css:
.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}
try this. should work perfectly
other solution is written above by MidnightLightining. using fixed height for image container.