Re: Correcting Footer for Desktop Witouth Effecting Mobile Version Of Website

NinoB97 · ‎08-12-2024

hello guys on the DESKTOP version of my website auraliving.nl at the bottom of the home page i have a small about us '' over ons '' text with my Logo above it. on the MOBILE version of my website it's correct and nice as it should be but on the DESKTOP version of my website the text gets mixed with the Logo en looks horrible. Please check out the mobile version and then the DESKTOP version so you can see and understand what i mean. i will also add a photo below of the problem.

MY QUESTION IS AS FOLLOWING: How do i fix the bottom of my page of the DESKTOP version so it looks the same as the MOBILE version of my website. Witouth it changing or effecting the MOBILE version of the website (since that one is already correct and needs to stay the same).

Really would love someone to help me out, thanks already !

Dan-From-Ryviu · ‎08-12-2024

<style>
#shopify-section-template--23130500792660__image_banner_q973eg { display: none !important; }
#shopify-section-template--23130500792660__image_with_text_gnH3zk img {
 object-fit: contain !important;
}
#shopify-section-template--23130500792660__image_with_text_gnH3zk .image-with-text__media {
border: unset;
box-shadow: unset;
}
</style>

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

- 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.

View solution in original post

Vinsinfo · ‎08-13-2024

@NinoB97 Please follow below steps to change desktop footer design as same as mobile version. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Image with text".

4. Then scroll down and paste the below code in the "Custom CSS" field like below screenshot and save changes.

@media screen and (min-width: 750px) {
  .image-with-text .image-with-text__media-item > * {
    border: none;
  }

  .image-with-text__media img {
    object-fit: contain;
  }
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

NinoB97 · ‎08-12-2024

u got a code for me to input to fix this problem?

Dan-From-Ryviu · ‎08-12-2024

<style>
#shopify-section-template--23130500792660__image_banner_q973eg { display: none !important; }
#shopify-section-template--23130500792660__image_with_text_gnH3zk img {
 object-fit: contain !important;
}
#shopify-section-template--23130500792660__image_with_text_gnH3zk .image-with-text__media {
border: unset;
box-shadow: unset;
}
</style>

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

- 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.

Vinsinfo · ‎08-13-2024

@NinoB97 Please follow below steps to change desktop footer design as same as mobile version. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Image with text".

4. Then scroll down and paste the below code in the "Custom CSS" field like below screenshot and save changes.

@media screen and (min-width: 750px) {
  .image-with-text .image-with-text__media-item > * {
    border: none;
  }

  .image-with-text__media img {
    object-fit: contain;
  }
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

Re: Correcting Footer for Desktop Witouth Effecting Mobile Version Of Website

Correcting Footer for Desktop Witouth Effecting Mobile Version Of Website

Community Blog Articles