Separate desktop & mobile header images

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!

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

On 11/23/2021 at 5:14 AM, tuanphan said:

Hi,

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

Hi, tuanphan.  Did you ever post that CSS code anywhere to show 1 on desktop and a different one on mobile?

@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>

@millenniumVR Use @Caroline_Smith code & this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en