0

we are using follwing code to display images in this site:

http://demo1.kidsdial.com/

you can see 4 images below "slideshow" images but it's not looking responsive.

means in mobiles and tabs it's not arranged properly

means in smaller screen monitors, it's not displaying properly.

please help me what code changes I have to do to make it responsive?

  • Do you need output in this way?? i57.tinypic.com/zvslra.jpg – dh47 Apr 8 '15 at 11:51
  • yes, thiat is awesome...... – Baby in Magento Apr 8 '15 at 11:57
  • Ok give me some time to write CSS for you . – dh47 Apr 8 '15 at 11:58
  • sure, take your time.... thanks a lot in advance.... – Baby in Magento Apr 8 '15 at 11:58
  • Before that can you clarify me as you said 4 images but I can only see three. – dh47 Apr 8 '15 at 12:01
1

Firstly add <div class="image1"> above the four images theme it will be like this.Remove inline styles for images.

   <div class="image1">
      <img alt="" src="http://demo1.kidsdial.com/media/wysiwyg/topcategory1.jpg">
      <img alt="" src="http://demo1.kidsdial.com/media/wysiwyg/topoffers1.jpg"> 
      <img alt="" src="http://demo1.kidsdial.com/media/wysiwyg/topoffers2.jpg">
      <img alt="" src="http://demo1.kidsdial.com/media/wysiwyg/em0113/topoffers3.jpg">
    </div> 

now add this CSS in @media screen and (min-width:768px) and (max-width:1023px)

.image1 > img {
  height: 143px !important;
  max-width: 169px !important;
  width: 100%;
}

in @media screen and (max-width:1024px)

.image1 > img {
  height: 143px !important;
  max-width: 231px !important;
  width: 100%;
}

in @media screen and (min-width:320px) and (max-width:767px)

.image1 > img {
  height: 143px !important;
  max-width: 160px !important;
  width: 100%;
  padding: 3px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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