CODEWITHSUNDEEP
htmlcsswordpress
user3543818
user3543818

Reputation: 53

How to make responsive thumbnail?

I have a question about "RESPONSIVE THUMBNAIL".

I use Wordpress and this (click) is my site. You can check it.

My Posts thumbnail is look like this ↓

Q1

I have 4 thumbnail. It's 300px 300px (square). And It's made by this code ↓

/* =============================================================================
   LAYOUT
   ========================================================================== */
.wrapper {margin:0 auto}

.grids{margin-left:-30px}
[class*="grid-"]{display:inline;float:left;margin-left:30px}
.grid-12{margin-right:0}

/* Grid 1080px */
.wrapper{width:100%}
.grid-1{width:60px}.grid-2{width:150px}.grid-3{width:240px}.grid-4{width:300px}.grid-5{width:420px}.grid-6{width:510px}.grid-7{width:600px}.grid-8{width:690px}.grid-9{width:780px}.grid-10{width:870px}.grid-11{width:960px}.grid-12{width:1030px}

/* Grid 960px (mediaqueries) */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.wrapper{width:100%}
.grid-1{width:50px}.grid-2{width:130px}.grid-3{width:210px}.grid-4{width:290px}.grid-5{width:370px}.grid-6{width:450px}.grid-7{width:530px}.grid-8{width:610px}.grid-9{width:690px}.grid-10{width:770px}.grid-11{width:850px}.grid-12{width:910px}
}

/* Grid 800px (mediaqueries) */
@media only screen and (min-width: 801px) and (max-width: 959px) {
.wrapper{width:100%}
.grids{margin-left:-20px}
[class*="grid-"]{margin-left:20px}
.grid-1{width:40px}.grid-2{width:100px}.grid-3{width:160px}.grid-4{width:220px}.grid-5{width:280px}.grid-6{width:340px}.grid-7{width:400px}.grid-8{width:460px}.grid-9{width:520px}.grid-10{width:580px}.grid-11{width:640px}.grid-12{width:680px}
}

/* Grid lt 800px / Mobile (mediaqueries) */
@media only screen and (max-width: 800px) {
.wrapper{width:100%}
.grids,
[class*="grid-"]{width:100%;margin-left:0;margin-right:0}
html{font-size:1.125em /* Make text slightly larger for smaller devices to improve readability. */}
body{-webkit-text-size-adjust:none}
}

You can see /* Grid 1080px */ and grid-4{width:300px}.

And I use this code too.

if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img width="100%" src="' . $image_src[0] . '">';
}
?>

This is my question :

How to make responsive thumbnail?

My thumbnail is resize only at 1080px, 960px, 800px, etc.

I would like to make my thumbnail always responsive. In any pixel, any device. Like this site (click).

You can see that site's thumbnail is always reponsive. It's really great!

Please help me! Thanks:)

Upvotes: 0

Views: 1015

Answers (1)

Arko Elsenaar
Arko Elsenaar

Reputation: 1739

You can achieve this with max-width and width:100%, for example:

.myResponsiveThumbnail {
    width:100%;
    max-width:300px;
}

You can apply this a several times in your media queries, and just change the max-width to whatever width it can be on his max.

Upvotes: 2

Related Questions