Footer Logo too large on mobile site

Site URL: https://www.bloomhomes.com.au

hello,

My footer logo is too appearing much too large on my mobile site.
I tried to use some code from previous posts but they haven't worked.

I'm using version 7.1. See screenshot attached.

www.bloomhomes.com.au

Your help is much appreciated

10 hours ago, michaelpga said:

Site URL: https://www.bloomhomes.com.au

hello,

My footer logo is too appearing much too large on my mobile site.
I tried to use some code from previous posts but they haven't worked.

I'm using version 7.1. See screenshot attached.

www.bloomhomes.com.au

Your help is much appreciated

Add to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  footer .image-block-wrapper img {
    width: 70% !important;
    height: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
  }

  footer .image-block-wrapper > .sqs-image-shape-container-element {
    padding-bottom: 70% !important;
  }
}

Support me by pressing 👍 if this useful for you

Hello bangank36,

Thanks again for helping me with this issue.

You can see in my screenshot that the logo is up too high and still too large in size.

I would like the logo to appear 25% smaller and be to the left hand side of the footer, in line with the text, if possible?

5 hours ago, michaelpga said:

Hello bangank36,

Thanks again for helping me with this issue.

You can see in my screenshot that the logo is up too high and still too large in size.

I would like the logo to appear 25% smaller and be to the left hand side of the footer, in line with the text, if possible?

With the setting footer logo smaller and on the left of company information, you can replace my previous code with this one

@media only screen and (max-width: 767px) {
  footer
    .content-wrapper
    .content
    .sqs-layout
    > .row.sqs-row
    > .col:first-child {
    width: 25% !important;
    height: auto !important;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) !important;
  }

  footer
    .content-wrapper
    .content
    .sqs-layout
    > .row.sqs-row
    > .col:nth-child(2) {
    width: 75% !important;
    height: auto !important;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) !important;
  }
}

My result:

@bangank36 yes, that's perfect, thank you so much for your help!

Sorry, one more question - I know I've been asking for a lot of help today.

Could you help me with the mobile footer size of this logo? I'd like it smaller and to the left of the text too please. Thank you

www.abodestudio.com.au

On 10/11/2021 at 2:08 PM, michaelpga said:

Sorry, one more question - I know I've been asking for a lot of help today.

Could you help me with the mobile footer size of this logo? I'd like it smaller and to the left of the text too please. Thank you

www.abodestudio.com.au

Try this CSS

/* Mobile footer */
@media screen and (max-width:767px) {
div#page-section-6073cc487ffe752be973dabf .span-1 {
    width: 30% !important;
    float: left !important;
}
div#page-section-6073cc487ffe752be973dabf .span-3 {
    width: 70% !important;
    float: left !important;
}
}