Setting up a logo and images size

In previous post we created our demo template which had no CSS design defined. Also the images I used in the post were considerable big which I did on purpose. Now when the screen size is reduced the image size remains same. This way the image overflows the view area on device. Which is not acceptable when making responsive designs. So we are going to make the images in our blog fit the view area of visitors.
To do so we simply define the image size to be 100% by default.
That is add

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto; 
}
   


to the CSS of out theme.
This will not only apply to the images in the post. 

Comments

Popular posts from this blog

How to abuse DOTA 2 Battle Pass 2020

How to delete Hot Apps folder on Oppo Realme

How to change Game Name in YouTube Live Stream