Issue in code in respect to colour

Store Design

Topic summary

A user is experiencing issues with CSS color codes not working correctly on their desktop site. The problem involves styling for .videoBox h1 and .imageBoxInfoDescription h1 elements.

Key developments:

  • Initial code used media queries targeting screens below 767px and 749px, which only applied styles to mobile devices
  • When the user changed max-width to min-width, the video disappeared from mobile layout
  • A revised solution was provided removing media queries entirely to apply styles across both desktop and mobile

Current status:

  • The issue remains unresolved despite multiple code iterations
  • Screenshots show the color changes still aren’t working as intended on either desktop or mobile
  • The discussion has moved toward sharing collaborator access for direct troubleshooting, though the user reports private messaging is not enabled

Technical note: The original code had a CSS property without a selector, which was corrected in subsequent suggestions.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Screenshot (151).png
Screenshot (151).png1366×768 266 KB

The colour code is not working on the desktop site. Can someone please help?

2 Likes
2

Hello @ramyaq
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

3

Replace the existing code with this one please.

.videoBox h1 {
color: #FFFFFF !important;
}
.imageBoxInfoDescription h1 {
        color: #3d081b !important;
    }
@media screen and (max-width: 767px) {
    {
        margin-top: 0px;
        margin-bottom: -35px;
    }

    .fullscreen-video-wrap {
        min-height: 400px !important;
        z-index: 0 !important;
    }

    .videoBox h1 {
        font-size: 44px !important;
    }
}

@media screen and (max-width: 749px) {
    .imageBoxInfoDescription h1 {
        font-size: 23px !important;
        color: #3d081b !important;
    }
}

Now you are good to Go.

If this was helpful Mark as Solution and like it.

Thanks

4

https://kriemiy.in/

5

Your code is incorrect, and those lines of code are meant to apply the code to screens smaller than 767px and 749px

Screenshot 2025-06-12 at 09.00.03.png
Screenshot 2025-06-12 at 09.00.03.png2468×1222 420 KB

6

but soon as i change the max width to min width, the video disappear from mobile layout

7

Yes this should happen because now the media Query is just applied on the Desktop only. If you want it works for both then you need to remove the media Query. And use this code instead. And I see that there is issue with your code. The first one css property don’t have any selector.

Here is the revised code with the correct version.

.fullscreen-video-wrap {
        min-height: 400px !important;
        z-index: 0 !important;
    }

    .videoBox h1 {
        font-size: 44px !important;
        color: #FFFFFF !important;
    }
    .imageBoxInfoDescription h1 {
        font-size: 23px !important;
        color: #3d081b !important;
    }
8

Screenshot (156).png
Screenshot (156).png1366×768 265 KB

Screenshot (155).png
Screenshot (155).png1366×768 259 KB

Even after using your code, it is not working as I intended.

9

Screenshot (157).png
Screenshot (157).png1366×768 119 KB

Screenshot (158).png
Screenshot (158).png1366×768 119 KB

this is for mobile layout

10

Would you like to share the collab code in the p/m so that I can take a look.

Waiting for your reply.

Thanks

11

Please remove those line of code to apply the changes for both mobile and desktop

12

your p/m is not enabled

13

Check the c*ntact detail in the Signature below.

Thanks