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