Styling on my thumbnail not working properly on mobile screens

Question

Basically this is what the thumbnail looks like when viewed in a desktop. The image is floated left.

http://i255.photobucket.com/albums/hh140/testament1234/desktop_zps4ee3ead7.jpg

But when viewed in a mobile device. The styling does not seem to work properly.

http://s255.photobucket.com/user/testament1234/media/thumbnail_zpsb3a07926.jpg.html?sort=3&o=1

How can i fix this problem? The width of container is set to {width:100%, height:100%} then img{width:100%}

Here is the HTML/Markup

<div id="article-container" class="alpha omega eleven columns articles">
         <div class="thumbnail">
             <img src="images/thumbnail-articles-1.jpg" alt="thumbnail" />
         </div>
         <h2><a href="#" title="Place your title">Place your title here</a></h2>
         <ul>
             <li id="meta-author"><span>By author /</span></li>
             <li id="meta-comments"><span>6 Comments /</span></li>
             <li id="meta-date"><span>May 12, 2013 /</span></li>
             <li id="meta-views"><span>320 Views </span></li>

         </ul>
         <p>Lorem ipsum dolor sit a met, con sect et ur adipiscing elit. Sed rutrum mi et blandit pellentesque. Duis vulputate placerat nisi nec varius. Phasellus non nisi dui!.</p>
         <a class="read-more" href="#" title="Read More">Read More</a>
     </div>

Here is the CSS

/**************************************/
/*   MAIN CONTENT -> ARTICLES         */
/**************************************/

#article-container{margin-bottom:25px; border-bottom:5px solid #7e2d2d; padding-bottom:20px}
.thumbnail{float:right; width:220px; height:182px; margin-left:20px; background- color:#4d4d4d} 
.thumbnail img{margin:5px} 
.articles h2{font-size:25px}
.articles  li {color:#878080; font-size:10px; display:inline}
.articles h2, .articles ul, .articles p{margin-bottom:10px;}
.articles p{height:100px}
.articles li span{display:inline; padding-left:15px; background:url(images/meta-icons.png) no-repeat; width:11px; height:11px; padding-left:15px}

.articles h2 a{text-decoration:none; color:#4d4d4d}
.articles h2 a:hover{color:#7e2d2d}

#meta-author span{background-position:0px 0px}
#meta-comments span{background-position:0px -11px}
#meta-date span{background-position:0px -22px}
#meta-views span{background-position:0px -33px}



a.read-more{background-color:#4d4d4d; text-decoration:none; padding:5px; color:white; font:normal normal normal 15px 'droid_sansregular', sans-serif; text-transform:uppercase}
a:hover.read-more{background-color:#7e2d2d;}

score 0 · Answer 1 · answered Jul 10 '13 at 02:12

When you said "The width of container is set to {width:100%, height:100%} then img {width:100%}", I suppose you were referring to the dimensions of the thumbnail div? If that's the case then your img dimensions would exceed the dimensions of your container because your img has a 5px margin so it would be 100% + 5px.

I think you just need remove the dimensions of the img, then set the display to block.

Styling on my thumbnail not working properly on mobile screens

1 Answers1