Footer.Liquid Code Edit Pulls My Logo From Header Down

Highlighted
New Member
1 0 0

I'm trying to add a custom icon list in the footer and when I do, the logo in my header gets pulled down (only on mobile).  Here is the code I'm using in the footer.

See the logo dipping into the header imageSee the logo dipping into the header image

<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial;
}

.header {
text-align: center;
padding: 32px;
}

.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<body>

<!-- Header -->
<div class="header">
<h1></h1>
<p></p>
</div>

<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://cdn.shopify.com/s/files/1/0065/4068/9493/t/5/assets/Sonics_Icon.png?v=1604692579" style="width:100%">
<img src="https://cdn.shopify.com/s/files/1/0065/4068/9493/t/5/assets/Sounders_Icon.png?v=1604692572" style="width:100%">

</div>
<div class="column">
<img src="https://cdn.shopify.com/s/files/1/0065/4068/9493/t/5/assets/Seahawks_Icon.png?v=1604692585" style="width:100%">
<img src="https://cdn.shopify.com/s/files/1/0065/4068/9493/t/5/assets/Mariners_Icon.png?v=1604692611" style="width:100%">

</div>
<div class="column">
<img src="https://cdn.shopify.com/s/files/1/0065/4068/9493/t/5/assets/Kraken_Icon.png?v=1604692617" style="width:100%">
<img src="https://cdn.shopify.com/s/files/1/0065/4068/9493/t/5/assets/20Hoodies_Icon.png?v=1604692652" style="width:100%">

</div>
<div class="column">
<img src="https://cdn.shopify.com/s/files/1/0065/4068/9493/t/5/assets/Storm_Icon.png?v=1604692541" style="width:100%">
<img src="https://cdn.shopify.com/s/files/1/0065/4068/9493/t/5/assets/FreeMasks_Icon.png?v=1604692631" style="width:100%">

</div>
</div>

</body>
</html>

0 Likes
Highlighted

Hello.....
Please share your store URL .
So that I will check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes