Jump to content

Is there a way to have conditional images for the header banner for desktop and mobile view?

Recommended Posts

Site URL: https://www.grindngrowchicago.com/

I want to use my current banner photo for both desktop and mobile but the issue I'm running into is not liking the way it scales when going between both. If this was a perfect world I would love to use this same image at the larger default size within squarespace for the Desktop version then use the small default setting for mobile. Is there a way to apply this condition?

Link to comment
  • Replies 3
  • Views 774
  • Created
  • Last Reply
On 4/24/2021 at 2:35 AM, designerdesigning said:

Site URL: https://www.grindngrowchicago.com/

I want to use my current banner photo for both desktop and mobile but the issue I'm running into is not liking the way it scales when going between both. If this was a perfect world I would love to use this same image at the larger default size within squarespace for the Desktop version then use the small default setting for mobile. Is there a way to apply this condition?

Add to Design > Custom CSS

/* resize mobile top banner */
@media screen and (max-width:767px) {
body.homepage article section:first-child {
    min-height: unset !important;
    height: 45vh;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/27/2021 at 8:17 PM, sbwalker5 said:

Hi, I'm having a similar issue to this. I've used the code above - but this only works on the homepage. How do I get this to resize the mobile banner for all pages?
Thanks

Can you share link to pages where you have problem? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.