/* Added April 04 2020 by John. S - Shopify Store Owner - 2-3 Grid Homepage Index Section */ * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ .header-miteigi2col { grid-area: header-miteigi2col; background-color: #ffffff; padding: 0px; text-align: center; font-size: 35px; } /* The grid container */ .grid-container-miteigi2col { display: grid; max-width: 100%; grid-template-areas: 'header-miteigi2col header-miteigi2col header-miteigi2col header-miteigi2col header-miteigi2col header-miteigi2col' 'left-miteigi2col left-miteigi2col middle-miteigi2col middle-miteigi2col right-miteigi2col right-miteigi2col' 'footer-miteigi2col footer-miteigi2col footer-miteigi2col footer-miteigi2col footer-miteigi2col footer-miteigi2col' ; grid-column-gap: 5px; /*- if you want gap between the columns */ } .left-miteigi2col, .middle-miteigi2col, .right-miteigi2col { padding: 0px; } /* Style the left column */ .left-miteigi2col { grid-area: left-miteigi2col; } /* Style the middle column */ .middle-miteigi2col { grid-area: middle-miteigi2col; } /* Style the right column */ .right-miteigi2col { grid-area: right-miteigi2col; } /* Style the footer */ .footer-miteigi2col { grid-area: footer; background-color: #ffffff; padding: 0px; text-align: center; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .grid-container-miteigi2col { grid-template-areas: 'header-miteigi2col header-miteigi2col header-miteigi2col header-miteigi2col header-miteigi2col header-miteigi2col' 'left-miteigi2col left-miteigi2col left-miteigi2col left-miteigi2col left-miteigi2col left-miteigi2col' 'middle-miteigi2col middle-miteigi2col middle-miteigi2col middle-miteigi2col middle-miteigi2col middle-miteigi2col' 'right-miteigi2col right-miteigi2col right-miteigi2col right-miteigi2col right-miteigi2col right-miteigi2col' 'footer-miteigi2col footer-miteigi2col footer-miteigi2col footer-miteigi2col footer-miteigi2col footer-miteigi2col'; } }