How can I hide an image from the footer in the mobile view?

Solved

How can I hide an image from the footer in the mobile view?

shaanrevery
Tourist
11 0 1

Hey,

I wanted to show the brand logo on the right side of the footer in the desktop view.

However, it looks quite weird in the mobile view.

So, preferably I wanted to either change the size of the brand logo in the mobile view and showcase it on the right side of the footer beside the menu items. Or if that is not possible, then I would like to hide it in the mobile view.

Either ways, please make sure that the desktop view does not get changed.

Can someone please help me with it?

Thank you!

 

Desktop View: 

Screenshot 2024-07-10 at 2.16.33 AM.png

 

Mobile View:  

Screenshot 2024-07-10 at 2.21.14 AM.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6827 1630 2009

This is an accepted solution.

Thanks for the info, check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

@media only screen and (max-width: 749px){
.footer-block__details-content.footer-block-image.right {
    justify-content: flex-start;
}
}

 

  • And save. (this is to align-left)

 

@media only screen and (max-width: 749px){
.footer-block__details-content.footer-block-image {
    display: none;
}
}

 

  • And Save. (to remove on mobile)
  • Or this is only eggestion to align all of them in the center. 

 

@media only screen and (max-width: 749px){
.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
    text-align: center;
}
.list-menu__item {
    justify-content: center;
}
}

 

  • And save. 
  • Result:
  • Made4uoRibe_0-1720563201210.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 13 (13)

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Hi @shaanrevery 

would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
shaanrevery
Tourist
11 0 1

Hey @Made4uo-Ribe,

Here is the website URL - https://www.discoverrevery.com/
And the password is opresu.

Thank you!

Made4uo-Ribe
Shopify Partner
6827 1630 2009

This is an accepted solution.

Thanks for the info, check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

@media only screen and (max-width: 749px){
.footer-block__details-content.footer-block-image.right {
    justify-content: flex-start;
}
}

 

  • And save. (this is to align-left)

 

@media only screen and (max-width: 749px){
.footer-block__details-content.footer-block-image {
    display: none;
}
}

 

  • And Save. (to remove on mobile)
  • Or this is only eggestion to align all of them in the center. 

 

@media only screen and (max-width: 749px){
.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
    text-align: center;
}
.list-menu__item {
    justify-content: center;
}
}

 

  • And save. 
  • Result:
  • Made4uoRibe_0-1720563201210.png

     

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
shaanrevery
Tourist
11 0 1

Hey @Made4uo-Ribe,

 

I tried all the code options you provided and the latter two are working perfectly.

However, the first one is not really changing anything, it is not aligning the brand logo to the left in the footer (image attached below).

If you need, I can provide the base.css code file as well.

Ps. I am using the free Dawn version 15.0.0 theme.

Can you please help me with it? I want to weigh in all my options before deciding on any one of them.

Screenshot 2024-07-10 at 2.34.02 PM.png

Thank You!

Made4uo-Ribe
Shopify Partner
6827 1630 2009

The image youve shown is already in the left. Even we change the code into left. 

 

.footer-block__details-content.footer-block-image.right {
    justify-content: left;
}

 

And save. 

result:

Made4uoRibe_0-1720619022943.png

The flex-start is from the left to right. Right is flex-end. 

You can choose whatever you decide. But if you ask me it more nicer and cleaner the align all center in the mobile screen.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
shaanrevery
Tourist
11 0 1

Hey @Made4uo-Ribe,

 

Ohh jeez, sorry, completely my bad.

What I meant was that I want the brand logo in the right beside the know more and general information. 

I want the brand logo in the empty space there, how it is on the desktop view.

Can you help me with it?

Again, sorry about the misunderstanding.

Screenshot 2024-07-11 at 2.45.35 PM.png

Can we do something like this mockup?

Made4uo-Ribe
Shopify Partner
6827 1630 2009

if this design, add this one then. 

 

@media only screen and (max-width: 749px){
div.footer__content-top.page-width > div.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet > div:nth-child(3) {
    position: absolute;
    top: 10%;
    right: 0%;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1720720948109.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
shaanrevery
Tourist
11 0 1

Hey  @Made4uo-Ribe,

Using the code provided above, the footer is looking something like this.

Screenshot 2024-07-12 at 4.58.42 PM.png

Please help me. How can I correct the alignment here, the brand logo is overlapping with the text?

Below I have also attached the image configurations in Shopify, if that helps.

Thanks a lot!

Screenshot 2024-07-12 at 5.01.01 PM.png

 

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Add this code then.

@media screen and (max-width: 749px) {
    .footer-block-image.right {
        justify-content: right !important;
    }
}

And save. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
shaanrevery
Tourist
11 0 1

Hey @Made4uo-Ribe,

Thanks a lot, worked perfectly!

For helping me throughout the confusion and conundrum, genuinely thank youuu!

Made4uo-Ribe
Shopify Partner
6827 1630 2009

Your welcome! Good thing you finally decide the designs. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PageFly-Richard
Shopify Partner
4394 1005 1657

Hi @shaanrevery 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (max-width: 767px) {
.footer-block__image-wrapper {
    display: none;
}
}
</style>

PageFlyRichard_0-1720571611112.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
8383 1650 1663

Hi @shaanrevery 

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

<style>
@media (max-width: 749px) {
.footer-block:has(.footer-block__image-wrapper) { display: none !important; }
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.