Hey there, happy Friday everyone!
I've been working on rebuilding my company's website to learn HTML and CSS. I'm currently creating a replica of the original site and it's going really well so far.
However, I've run into some issues with the footer section on smaller screens - the items are getting mixed up.
In the image below, you can see (1) how it should look and (2) what is happening in my case:
https://i.sstatic.net/PqDws.png
Here is the snippet of my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
............. (code continues)
Your assistance will be greatly appreciated.