Change image caption for mobile view

Site URL: https://fennel-porpoise-ttfg.squarespace.com

Hi guys, I am absolutely new to building websites and I have absolutely no idea about coding but since Squarespace support sent me here, you guys are my last hope. 

To get to the website here is the password: slhkAB2021 

The problem is: The desktop view of the start page is great. The group photo with the white gradient on the left, so that the headline can be there, fits perfectly. Unfortunately, when I open the mobile view, the blue headline jumps to the group photo and so of course is no longer readable. Is there a way that the heading color is adjusted only for the mobile view? So is there a code that specifies that the color adjusts depending on the pixel size? So that it is not blue in the mobile version, but white? Then you could see the group picture and the headline. 

I really hope there is a solution to this. Thanks in advance! 

Hi,

Some options to solve this

O1. Move text under image on mobile only

O2. Change text color

O3. Add a background or shadow behind text

O4. Add an overlay color over image on mobile only

What do you think?

Hi, Thank you for your answer! 

But how do I create changes that only go for the mobile view? As mentioned in option 1 and 4? Is that possible at all? 

On 4/25/2022 at 6:56 PM, annabroehl said:

Hi, Thank you for your answer! 

But how do I create changes that only go for the mobile view? As mentioned in option 1 and 4? Is that possible at all? 

Add to Design > Custom CSS

/* Home top banner image */
@media screen and (max-width:767px) {
[data-section-id="6196827360a99b3ef48ee9fb"] .section-background:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
[data-section-id="6196827360a99b3ef48ee9fb"] .content-wrapper * {
    color: white;
    z-index: 9999;
}}

Wow! This helped a lot! Thank you very mich!!!