Adding some CSS styles for the Blog layout

This short tutorial goes over how to add some CSS styles to change the look and feel of our blog layout. We will also add some styles to make sure images stay within our defined containers. This will also make sure our WordPress theme stays responsive.

Steps

  1. Not much here, but in the Media section in our style.css file we need to add img to make sure all images have a max-width of 100%. This section in the stylesheet should look like the following:

  2. The only other change we made in this tutorial was to the blog layout. In the video I added a bottom border to each post and added some spacing. This is in the Posts and pages section of the stylesheet. This section should now look like the following:

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Brad, I like that you pointed out where to find the code in the stylesheet and what line number. That is something other tutorials never seem to mention. I think if you keep stating those types of tibits, you’ll find that your students will be pleased.

  • Just wanted to mention in case anyone else has this issue, I added a height to embed,iframe,object,img { max-width: 100%; height: auto; } the images were not resizing properly for me. YouTube videos never seem to display properly for me without a custom class, here is what I use in case anyone is interested http://pastebin.com/dhKXC93R

  • I noticed the image was not responding retaining the image’s aspect ratio. @zeaks:disqus , thank you for the YouTube video CSS code. Here’s the one for images that worked for me:
    http://pastebin.com/gwy3aJAU
    Father God bless<