Jump to content

Separate desktop & mobile header images

Recommended Posts

Site URL: https://www.tessawegert.com/about

Help! 

My client is hoping I can fix the split-second in which the header image focal point takes to load. (It shows the focal point as dead-centre before shifting to the chosen location).

I posted that question but didn't get any responses so I assume it's not an easy fix, but is it possible to maybe have one header image for desktop and one for mobile? I got an assist doing this on the homepage, but need help doing it on the "about" and "contact" pages.

https://www.tessawegert.com/about

https://www.tessawegert.com/contact

Thanks in advance!

Link to comment
On 11/21/2021 at 2:47 AM, Jesserka said:

Site URL: https://www.tessawegert.com/about

Help! 

My client is hoping I can fix the split-second in which the header image focal point takes to load. (It shows the focal point as dead-centre before shifting to the chosen location).

I posted that question but didn't get any responses so I assume it's not an easy fix, but is it possible to maybe have one header image for desktop and one for mobile? I got an assist doing this on the homepage, but need help doing it on the "about" and "contact" pages.

https://www.tessawegert.com/about

https://www.tessawegert.com/contact

Thanks in advance!

Hi,

You can add 2 sections with different image, then we will give the code to show 1 on desktop, show 1 on mobile

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
  • 2 months later...

@millenniumVR Hi! Here is some code that I have used to achieve this in the past. You will need to know how to find your data section IDs so that you can substitute them in the CSS code snippet.

 

<style>
  /* Mobile Screen Size */
  @media(min-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: none;
    }
  }

  /* Desktop Screen Size */
  @media(max-width: 768px) {
    [data-section-id='{MOBILE_ID_GOES_HERE}'] {
      display: block;
    }
    [data-section-id='{DESKTOP_ID_GOES_HERE}'] {
      display: none;
    }
  }
</style>

 

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

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.