Footer image displays differently on mobile phone

kiburi-lifestyl · ‎06-14-2024

I have placed a image in the Footer section but when looking at the site on a Mobile Phone, the photo seems to duplicate at bottom as like it repeats. How do I fix this.

Site is - https://kiburi-lifestyle.myshopify.com/

Dan-From-Ryviu · ‎06-14-2024

Hi @kiburi-lifestyl

You must add this code to theme.liquid file, after <head> to solve this issue

<style>
@media (max-width: 749px) {
.footer {
    background-repeat: no-repeat;
    background-size: cover;
}
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kiburi-lifestyl · ‎06-14-2024

Thanks buddy, your awesome 🙂 Fixed. Thanks man appreciate your help 🙂

Dan-From-Ryviu · ‎06-14-2024

Very welcome 😊

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rahul_dhiman · ‎06-14-2024

Hello @kiburi-lifestyl
Please paste the code where you have added this image;

<style>
       .footer {
                 background image: url("https://cdn.shopify.com/s/files/1/0539/6735/6095/files/Headerkl.jpg?v=1718342534") !important;
	         background-repeat: no-repeat;
		 background-size: cover;
                }
</style>

Your image will cover the whole space in the footer.
Thanks

Was I helpful?

Buy me a coffee

❤

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

Footer image displays differently on mobile phone

Footer image displays differently on mobile phone

Buy me a coffee

Community Blog Articles