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 get rid of TouchPal 2020

How to abuse DOTA 2 Battle Pass 2020

How to make neon light signs in Unity 3D