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

[shaanrevery]

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: 

Mobile View:  

[Made4uo-Ribe]

Hi @shaanrevery 

would you mind to share your store URL? Thanks!

[shaanrevery]

Hey @Made4uo-Ribe,

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

Thank you!

[Made4uo-Ribe · 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:
• 

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

[shaanrevery]

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.



Thank You!

[Made4uo-Ribe]

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:

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!

[shaanrevery]

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.

Can we do something like this mockup?

[Made4uo-Ribe]

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:

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

[shaanrevery]

Hey  @Made4uo-Ribe,

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



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!

[Made4uo-Ribe]

Add this code then.

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

And save. 

[shaanrevery]

Hey @Made4uo-Ribe,

Thanks a lot, worked perfectly!

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

[Made4uo-Ribe]

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!

[PageFly-Richard]

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>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[Dan-From-Ryviu]

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>