Hello,

 

I am hoping someone might be able to help me with something....

 

I am trying to make a responsive image grid and I thought I had nailed it, however, I have noticed the images squish up in small resolutions.

 

Now my initial thoughts were that if all the images were in proportion they would downsize the same. However, after adding:

width:100%;
height: auto;

the images all display at different sizes and I can figure out a solution. Has anybody experienced this before?

 

The block CSS is:

.services-single-image-block{
	margin-bottom:20px;}
	
.services-single-image-block .column-one{
	width:30%;
	float:left;
	border-right:5px solid #fff;}
	
.services-single-image-block .column-two{
	width:40%;
	float:left;}
	
.services-single-image-block .column-three{
	width:30%;
	float:left;
	border-left:5px solid #fff;}

.services-single-image-block .image-two, .services-single-image-block .image-four{
	border-bottom:5px solid #fff;}

Edited September 24, 201510 yr by Charly

You don't want width 100% on responsive images,

 

you want max.width: 100%. Otherwise an image will scale beyond it's actual size and look terrible.

 

For smaller screens you need to use media querys.

 

If that is confusing to you I suggest you spend some time properly learning CSS before you attempt a project.

Thanks for your comment!

 

I did actually mean max-width and I do know how to use media queries. Just figured there must be a cleaner way to approach this and thought someone else might have a better idea.

 

I am self taught and i've learnt alot by talking to other people... sorry for bothering you.

No need to apologise.

 

There's nothing 'unclean' with media querys, and here's a perfect example of where they should be used.

 

I am also self taught.. I just quickly realised after attempting my first project that I had to go back and work on my theory first

Edited September 24, 201510 yr by rbrtsmith