0

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;

  1. What is the typical desired behaviour to make a website responsive when working with images that are next to text?
  2. How would I implement that?

All tips are welcome!

2 Answers 2

4

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

2

Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.