Is there any way to make my OUR BRANDS page in my website mobile friendly , right now the website looks great on the desktop but I am unable make it look good on mobile , is there any ideas to solve this issue?
IF YOU SCROLL AT THE VERY BOTTOM OF THE PAGE YOU CAN VIEW THE OPTION OF OUR BRANDS , CLICKING ON THAT WILL LEAD TO THAT PAGE. PLEASE DO HELP ME.
Site url :: https://pnckim3f6mb9wca7-71493648693.shopifypreview.com
Thank you!!!
code for that page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brand Logos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="brand-logos-container">
<!-- Alphabet and First Brand Logo on the same line -->
<div class="alphabet-container">
<span class="alphabet-letter">A</span>
</div>
<div class="brands-container">
<!-- Brand Logo 1 -->
<div class="brand-logo">
<a href="https://laadlee.com/collections/frigg">
<img alt="Brand 1" src="https://laadlee.com/cdn/shop/files/Mothersparsh.png?v=1685093983">
</a>
</div>
<!-- Brand Logo 2 -->
<div class="brand-logo">
<a href="https://laadlee.com/search?q=citron&options[prefix]=last">
<img alt="Brand 2" src="https://laadlee.com/cdn/shop/files/Canpol.png?v=1685094045">
</a>
</div>
<!-- Brand Logo 3 -->
<div class="brand-logo">
<a href="https://laadlee.com/search?q=mushie&_pos=1&_psq=mush&_ss=e&_v=1.0">
<img alt="Brand 3" src="https://logos.textgiraffe.com/logos/logo-name/35535360-designstyle-badge-m.png">
</a>
</div>
<!-- Brand Logo 4 -->
<div class="brand-logo">
<a href="https://laadlee.com/collections/sundays-child?_pos=1&_psq=sund&_ss=e&_v=1.0">
<img alt="Brand 4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTt8W4W7-7Bs1B1tFF_QibUp2TnHe9_Pl_3C-PRWBCTh7THBiOYzdiKS_Rouq7Oc7kWfk0&usqp=CAU">
</a>
</div>
<!-- Brand Logo 5 -->
<div class="brand-logo">
<a href="https://laadlee.com/collections/frigg">
<img alt="Brand 5" src="https://laadlee.com/cdn/shop/files/Mothersparsh.png?v=1685093983">
</a>
</div>
<!-- Brand Logo 6 -->
<div class="brand-logo">
<a href="https://laadlee.com/search?q=citron&options[prefix]=last">
<img alt="Brand 6" src="https://laadlee.com/cdn/shop/files/Canpol.png?v=1685094045">
</a>
</div>
<!-- Brand Logo 7 -->
<div class="brand-logo">
<a href="https://laadlee.com/search?q=mushie&_pos=1&_psq=mush&_ss=e&_v=1.0">
<img alt="Brand 7" src="https://logos.textgiraffe.com/logos/logo-name/35535360-designstyle-badge-m.png">
</a>
</div>
<!-- Brand Logo 8 -->
<div class="brand-logo">
<a href="https://laadlee.com/collections/sundays-child?_pos=1&_psq=sund&_ss=e&_v=1.0">
<img alt="Brand 8" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTt8W4W7-7Bs1B1tFF_QibUp2TnHe9_Pl_3C-PRWBCTh7THBiOYzdiKS_Rouq7Oc7kWfk0&usqp=CAU">
</a>
</div>
<!-- Brand Logo 9 -->
<div class="brand-logo">
<a href="#">
<img alt="Brand 9" src="https://laadlee.com/cdn/shop/files/Mothersparsh.png?v=1685093983">
</a>
</div>
<!-- Brand Logo 10 (Replica of Brand 2) -->
<div class="brand-logo">
<a href="#">
<img alt="Brand 10" src="https://laadlee.com/cdn/shop/files/Canpol.png?v=1685094045">
</a>
</div>
<!-- Brand Logo 11 (Replica of Brand 3) -->
<div class="brand-logo">
<a href="#">
<img alt="Brand 11" src="https://logos.textgiraffe.com/logos/logo-name/35535360-designstyle-badge-m.png">
</a>
</div>
<!-- Brand Logo 12 (Replica of Brand 4) -->
<div class="brand-logo">
<a href="#">
<img alt="Brand 12" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTt8W4W7-7Bs1B1tFF_QibUp2TnHe9_Pl_3C-PRWBCTh7THBiOYzdiKS_Rouq7Oc7kWfk0&usqp=CAU">
</a>
</div>
</div>
</div>
<hr class="container-divider">
<style>
.brand-logos-container {
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
}
.alphabet-container {
width: 50%;
padding: 20px;
text-align: center;
}
.alphabet-letter {
font-size: 55px;
}
.brands-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.brand-logo {
flex-basis: calc(50% - 10px);
margin: 5px;
text-align: right;
}
.brand-logo img:hover {
transform: scale(0.9);
}
.brand-logo img {
width: 150px;
height: auto;
}
.container-divider {
width: 100%;
border: 1px solid #ccc;
height: 1px;
margin: 20px 0;
}
@media (max-width: 768px) {
.alphabet-container,
.brand-logo {
flex-basis: 100%;
}
}
</style>
</body>
</html>