Website : My Personal Blog

- Part 10 -

This is the second part of a personal blog website called - Webgger. I have added responsive layout to support small screen like tablet and mobile.
If you have watched the youtube video, I skipped a part in the video for breakpoint 768px and above, you will need to add the following selector in your css rule, below blog list, if you want to but it is not necessary.


/* Media query First Brakpoint */
@media (min-width: 768px) and (max-width: 991px) {
/* Blog container */
.blog-container > img {
width: 30rem;
height: 30rem;

.content > p:nth-child(1) {
font-size: 1rem;

.content > p:nth-child(3) {
font-size: 1.2rem;

You can add more breakpoints according to your need and layout, I just added two breakpoints.
You can replace all this text with your own text as well as all the images with your own images. Feel free to use it wherever you see it fits.
This is a single page website. You can add more pages according to your need.

My personal blog image

If you have not watched the video and want to check it, here is the youtube link.

The download zip does not contain media query for blog container mentioned above.