Flexible Responsive Photo Gallery

Responsive Image Grid

Resize the browser window to see the responsive effect.

Comments

Post a Comment

Popular posts from this blog

First HTML Program

First Web page in Web Programming Get to know me More My Hobbies and Interes are the following :. Photography Web Programming Content Creation My Life Principles :. obey God and follow his commandments and teachings Learning depends on Learners willingness and Capability to learn more Everyday is a chance to grow and Learn More so Improve yourself and Level up your skills Visit My Social Media and Portfolio Portfolio/Blog Facebook Youtube
Read more

HTML Code Flexbox Responsive Photo Gallery

View the Output of this Code  <!DOCTYPE html> <html> <style> * {   box-sizing: border-box; } body {   margin: 0;   font-family: Arial; } .header {   text-align: center;   padding: 32px; } .row {   display: flex;   flex-wrap: wrap;   padding: 0 4px; } /* Create four equal columns that sits next to each other */ .column {   flex: 25%;   max-width: 25%;   padding: 0 4px; } .column img {   margin-top: 8px;   vertical-align: middle; } /* Responsive layout - makes a two column-layout instead of four columns */ @media (max-width: 800px) {   .column {     flex: 50%;     max-width: 50%;   } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media (max-width: 600px) {   .column {     flex: 100%;     max-width: 100%;   } } </style> <body> <!-- Header --> <div class="header"...
Read more