Styling on my thumbnail not working properly on mobile screens

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


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%}

This is my 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>

This is my CSS

/**************************/
/*   NAVIGATION           */
/**************************/


.navigation-right{text-align:right}
.navigation-right li{margin-right:40px}
.navigation-left li{margin-left:40px}
.navigation li{display:inline; line-height:130px}
.navigation a{text-decoration:none; color:#4d4d4d; font-size:25px}
.navigation a:hover{color:#7e2d2d}

#logo h1 a{margin-top:20px; margin-bottom:20px; background:url(images/logo.png) no-repeat; display:inline-block; width:173px; height:105px; text-indent:-99999px}

I will really be thankful to those who can provide me a solution for my problem. I’m not sure if i need to change my markup and just some simple styling.

How does that CSS relate to the HTML markup?

Could you please provide a link to the site, or post a stand-alone page that demonstrates the problem.

@clestcruz
Yes, we need either a link or a proper code example. Have a look at this post (and the rest of the thread) for tips on how to post a useful code example: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics&p=5406274&viewfull=1#post5406274

Here is the link for the website

http://clestportfolio.zz.mu/root(Client%20Blog)/


	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

	.thumbnail{width:100%; height:100%}
	.thumbnail img{width:100%}
	}

You can’t put the border on the image if it’s set to width: 100%, as border is added to width. Remove that border from the image, and instead add these styles to the .thumbnail div:

@media only screen and (max-width: 479px) {
  .thumbnail {
  float: none;
  width: auto;
  margin: 0;
  padding: 5px;
  }
}

I just realized i posted the wrong CSS lol, facepalm.


/**************************************/
/*   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;}


Did you see that I posted a solution for you?

Yes i have, i just posted the correct CSS regarding my problem. I was still sleepy when i posted my problem

There are no border in my image. Basically the image is placed inside a container. For example it looks like this

<div class=“image_container”><div class=“place_image”>Place image here</div></div>

Yes, sorry, I meant margin. I’ve provided you with a solution. Have you tried it? In your media query styles for small screens, set the margin to 0 on the image, and add these styles to the thumbnail container:

float: none;
width: auto;
margin: 0;
padding: 5px;

I tried your solution but it seems that it now has a big margin in right

http://clestportfolio.zz.mu/root(Client%20Blog)/

OK, add this to those styles:

float: none;
width: auto;
margin: 0;
padding: 5px;
[COLOR="#FF0000"]height: auto;[/COLOR]

and then add this inside the media rule:

.thumbnail img {
  margin: 0;
  width: 100%;
}

Thanks for the fix. Now the containers are perfectly aligned

Cool, glad that helped. :slight_smile:

Still curious why thumbnail img{margin:5px} won’t work in media queries

You had the image set to width: 100%. Adding 5px margin on each side means that the image is 100% width + 10px, which makes it too big for the container. That’s why it’s better to create that pretend border on the container itself (using padding).

I see thanks for the insight

You’re welcome. Yes, it’s crucial to understand that padding and margin get added to the overall width of an element. (There are new changes to CSS that make this optional, but essentially—at least for now—the old rules are still pretty important.)

border. Don’t forget border :slight_smile: