htmlcssresponsive-designmediadevice-width

HTML/CSS not working responsively when device is less than 400px wide

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">
                <a href="#"><h4>Wrapping Services</h4></a>
                <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.

Solution

  • 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.