Here I share with you how to add 2 columns and 4 columns for desktop, and only 1 column for mobile.
Step A: edit default_head_block.xml which is under “app/design/frontend/Optical4U/glasses/Magento_Theme/layout/
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/custom.css" media="all" />
</head>
</page>Step B: edit custom.css which is under “app/design/frontend/Optical4U/glasses/web/css/
.navigation .level0 {
margin: 0 1px 0 0;
font-size: 13px;
}
.header.panel > .header.links {
padding-right: 10px;
}
* {
box-sizing: border-box;
}
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.column li {
padding: 0;
margin-bottom: 7px;
color: #000;
}
.glasses ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.glasses li {
padding: 0;
margin-bottom: 7px;
color: #000;
}
@media screen and (max-width: 900px) {
.row {
flex-direction: column;
}
}
@media screen and (max-width: 1920px) {
.footer.content .links {
width:100%;
}
.footer.content .block {
float: inherit;
}
.column {
flex: 50%;
padding-left: 10px;
}
.glasses {
flex: 25%;
padding-left: 10px;
}
}Say we plan to add related articles at the bottom, same as https://www.optical4u.com/, login your magento 2.4 prescription glasses shop admin panel, and edit “homepage”:
<div class="row">
<div class="column">
<ul>
<li><a href="https://www.optical4u.com/how-to-wear-mens-prescription-glasses">How to Wear Men's Prescription Glasses?</a></li>
<li><a href="https://www.optical4u.com/how-to-find-the-perfect-pair-of-womens-prescription-glasses">How to Find the Perfect Pair of Women’s Prescription Glasses?</a></li>
<li><a href="https://www.optical4u.com/what-are-prescription-computer-glasses">What Are Prescription Computer Glasses?</a></li>
<li><a href="https://www.optical4u.com/how-do-you-buy-cheap-prescription-glasses-online">How Do You Buy Cheap Prescription Glasses Online?</a></li>
<li><a href="https://www.optical4u.com/how-can-you-buy-the-right-kids-prescription-glasses">How Can You Buy the Right Kids Prescription Glasses?</a></li>
<li><a href="https://www.optical4u.com/how-much-do-you-know-about-cat-eye-prescription-glasses">How Much Do You Know About Cat Eye Prescription Glasses?</a></li>
<li><a href="https://www.optical4u.com/how-can-you-buy-the-best-prescription-sunglasses">How Can You Buy the Best Prescription Sunglasses?</a></li>
<li><a href="https://www.optical4u.com/do-you-know-how-to-buy-prescription-glasses">Do You Know How to Buy Prescription Glasses?</a></li>
<li><a href="https://www.optical4u.com/do-you-know-how-to-select-mens-prescription-sunglasses">Do You Know How to Select Men's Prescription Sunglasses?</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="https://www.optical4u.com/what-are-the-reasons-to-choose-blue-light-prescription-glasses">What Are the Reasons to Choose Blue Light Prescription Glasses?</a></li>
<li><a href="https://www.optical4u.com/are-round-prescription-glasses-worth-it">Are Round Prescription Glasses Worth It?</a></li>
<li><a href="https://www.optical4u.com/what-are-polarized-prescription-sunglasses">What Are Polarized Prescription Sunglasses?</a></li>
<li><a href="https://www.optical4u.com/are-you-sure-about-how-to-buy-prescription-eyeglasses">Are You Sure About How to Buy Prescription Eyeglasses?</a></li>
<li><a href="https://www.optical4u.com/a-brief-overview-of-discount-eyeglasses">A Brief Overview of Discount Eyeglasses</a></li>
<li><a href="https://www.optical4u.com/shop-for-reading-glasses-after-reading-this">Shop for Reading Glasses After Reading This</a></li>
<li><a href="https://www.optical4u.com/how-can-you-buy-the-right-womens-prescription-sunglasses">How Can You Buy the Right Women's Prescription Sunglasses?</a></li>
<li><a href="https://www.optical4u.com/kids-eyeglasses-what-suits-them-the-best">Kids Eyeglasses: What Suits Them the Best</a></li>
<li><a href="https://www.optical4u.com/girls-eyeglasses-how-to-wear-them">Girl's Eyeglasses: How to Wear Them</a></li>
</ul>
</div>
</div>
</div>Demo: https://www.optical4u.com