Jump to content

Keeping mobile banner the same size

Recommended Posts

50 minutes ago, nw7063 said:

Site URL: https://www.soulfruit.co.uk/

Hi!

is there custom code that we can use so that our banner images on the top of each page don't resize when going into mobile?

Thank you!

Is it the result you want to achieve?

 

image.png.3de1ad6e82f99e07ea40064e72ecdc27.png

Due to the limited space for heading of banner in mobile, can we just hide it?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
8 minutes ago, nw7063 said:

Hi! Yes! Although ideally a little more space at the top for the logo?

Thank you so muhc

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="607e7dea4ff0a43308d8722f"] img {
    height: auto !important;
  }

  section[data-section-id="607e7dea4ff0a43308d8722f"] .content-wrapper {
    display: none;
  }
}

Let me know how it works on your site

Kindly describe more detail about your next point of adding more space for logo. Can you share a screenshot of what you intend to?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Will this code keep the same size of all banners for each page when coverting mobile view?

We will be changing all banner images so that the text is already in the image. We want the logo on the mobile view to stay at the top centre of the image and not be placed over the image so you can't see it.

I've attached an example of a banner we are going to upload.

Thanks so much!

SOLELY FRUIT FRUIT FOR THE SOUL (1).png

Link to comment
3 hours ago, nw7063 said:

The code worked for the homepage - can you help me with all the other pages.

If we could keep the image height too / so that the logo doesn't overlap with the image?

Thank you so much!

Is it what you intend to implement?

image.png.b6d89ad4248bd6a811d9d3bcbe3e0bca.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.