By drupalfriend123 on

Hi,

I am using bootstrap theme.

I created two blocks.

Block1 body:
<a href = "http://www.img1.com/" target = "_blank"> <img src="img1.png" >

Block1: Block Class: col-xs-6

Block2 body:

<a href = "http://www.img2.com/" target = "_blank"> <img src="img2.png" >

Block2: Block Class: col-xs-6

This is for mobile. When I make the screen less than 768px, I do see this two blocks side by side as expected. As I am making the screen smaller, (1) I expected both images to be responsive but I do not see it. (2) I see image one the left fixed and image on the right is overlapping the left image.

Did I make the block incorrectly? Do I need to apply css to make the images responsive?

Please advise.

⋅ Categories: Drupal 7.x

Comments

Stefan Lehmann’s picture

Stefan Lehmann commented

Not really a Drupal question to be honest and I'm not a CSS guy .. but as far as I know you have to give images a width via CSS based on percentages. If you google for "responsive images css" you'll get the idea.

I like cookies!

drupalfriend123’s picture

drupalfriend123 commented

.mcd img { float:left; width:80%; } .teks img{ float:right; width:80%; }

This code worked. Not sure this is the correct solution but images are responsive now.

gauravktomar’s picture

gauravktomar commented

Hi,
Yes this solution is correct. In case of overlapping, it's definitely a css issue. Float is a CSS positioning property and can be used to wrap text around images.
Fro more details about float, you can read this article: https://css-tricks.com/all-about-floats/

Best!
Gaurav