Logo images in banners appearing too large in mobile site

Site URL: https://www.nourish.melbourne

Hello,

I am having problems with the resizing of the logo images that I've used on all page banners when viewing on the mobile.

I would like these images to stay relative to the text in the same proportion as the desktop site.

Please see screenshots attached.

Thank you kindly

Which page in screenshot?

Every page on the website (besides the 'Become a Member' page) is experiencing the same issue - you will see in each header banner, this logo appears too large on the mobile device - thank you for your assistance!

Edit page where you have problem >> Add a Code Block (anywhere) >> Paste this code

<style>
  @media screen and (max-width:767px) {
  div#block-yui_3_17_2_1_1639369967627_2711 {
    width: 30%;
    margin: 0 auto;
}
  }
</style>

div#block....2711 is Image block id. Find id with this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

19 hours ago, tuanphan said:

Edit page where you have problem >> Add a Code Block (anywhere) >> Paste this code

<style>
  @media screen and (max-width:767px) {
  div#block-yui_3_17_2_1_1639369967627_2711 {
    width: 30%;
    margin: 0 auto;
}
  }
</style>

div#block....2711 is Image block id. Find id with this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hello,

Adding a code block to the page did not seem to work - take a look at the screenshots, the logo file is still much too large on the mobile site

21 hours ago, tuanphan said:

Above code for Events Page. With other page, replace with new block id. use above code to find block id.

Thank you so much - this worked perfectly!