Image in footer is blurry
Hi All,
I need help with my shopify website - we have added the client's LOGO as an image to the footer - this is a design requirement - but the logo is super blurry even though on the backend it looks clear and crisp. How do I make sure the logo doesn't lose clarity and stays clear?
website:
www.murelle.co
password:
12345
<style>
@media screen and (min-width: 768px) {
.footer-block__image-wrapper img {
width: 20%;
}
}
@media screen and (max-width: 767px) {
.footer-block__image-wrapper img {
width: 50%;
}
}
</style>
hey @snk729 dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body> ----->
before the body ----->
if this code work please do not forget to like and mark it solution
Hello @snk729
Try this code:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.footer-block__image-wrapper img {
display: block;
height: auto;
max-width: 100%;
object-fit: scale-down;
width: 590px;
}
@media only screen and (max-width: 767px) {
.footer-block__image-wrapper img {
max-width: 200px; /* optional: set a max width */
}
}
</style>
Result:
Hi @snk729 ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
@media(min-width:768px){
.footer_area {
padding-bottom: 13px !important;
}
footer-block__image-wrapper img {
max-width: 25% !important;
}
}
@media(max-width:767px){
.footer-block__image-wrapper img {
max-width: 30% !important;
}
}
</style>Result:
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
Hi @snk729
You can go to your store admin > Sales channels > Online Store > Themes > click "..." in Current theme > Edit code > open footer.liquid file, change 1100 to 2000 in lines 116 and 119, save file and check again.
