Top Footer Widget Image

Support
#1

Hi,

I’m trying to get the image in my footer to display like the image in the X demo footer: http://demo.theme.co/shop-ethos/product/happy-ninja/. See how in my site the image resizes before the widgets realign and in the demo the image does not resize? How would I get the image to behave like that?

I would also need the two border lines to display while the footer is in desktop mode. Then in mobile they can disappear.

  • Site Link: https://www.shopifyhelper.com/
  • Pro V: 1.1.1
  • Footer built with normal footer - NOT footer builder.
  • Wordpress all updated.
  • Minimum CSS applied while testing - but I can’t get it quite right.
  • Icon Stack
  • 4 Widget areas enabled - but only 3 have things in them. Would like the option to have 4. 1 of the image and 3 with custom menus and text.

Thank you in advance!

#2

Hello There,

Thanks for writing in!

1.) How would I get the image to behave like that?

  • Please remove the width and height of your image. You will need to edit the text widget content and use this instead:
<a href="/contact/"><img class="alignnone size-medium wp-image-1203" src="https://www.shopifyhelper.com/wp-content/uploads/2017/10/Footer-Shopify-Helper-Correct.png" alt="Shopify Helper"></a>

2.) To remove the bolder lines in smaller screens, you will need this custom css

@media(max-width: 767px){
  footer .x-column:first-child {
    border: none !important;
  }
}

We would loved to know if this has work for you. Thank you.

#3

That doesn’t seem to have fixed it…? I see the concept and played with the code a little - but it seems to still be shrinking on mobile.
Thank you,

#4

Hi There,

Look for this custom CSS on the Theme Options > CSS

footer .x-column:first-child {
    width: 40% !important;
    border-left: 1px solid #838383;
    border-right: 1px solid #838383;
}

Wrap it inside @media (min-width: 980px) so it does not mess up the mobile view layout

e.g.

@media (min-width: 980px) {
	/*place it here*/
}

Hope it helps,
Cheers!

#5

Perfect! Thank you so much!

#6

You’re welcome.

#7

Hello,
I changed stacks from Icon to Renew and now the footer widget image is shrinking again when I narrow the screen to mobile. Is there a different code it needs?
Thank you!
Kate

#8

Hi Kate,

Please wrap this block on the @media (min-width: 980px) query as well.

.x-column.x-1-4 {
    width: 16% !important;
}

Thanks,

#9

It’s working on all but the landscape tablet screen size. It is still shrinking when it’s there. Thoughts?

Thank you! I appreciate your help!

ETA: it might be a cache thing. I’m not seeing it shrink anymore. Does it seem to be working on your end as well?

#10

Hi There,

This is how that footer image looks on my end now.

screenshot

Is that the layout that you’re after?

Thanks,

#11

Yes, thank you for your help! :slight_smile:

#12

Glad we could help.

Cheers!