Change color of background on mobile only

[MoggedTeams]

Hey, i would like to change the background color of the website on Mobile ONLY. My current color is #161E25 but the color on mobile is like all black, so the black shirt doesn't seems to be there. I want a code to solve that on mobile only. For the color Im not sure so just put whatever for test code.

[Keshan97]

To change the background color of your website on mobile only, you can use media queries in CSS to target specific screen sizes. Here's how you can do it:

/* Default background color for desktop */
body {
  background-color: #161E25; /* Your current color */
}

/* Media query for mobile devices */
@media only screen and (max-width: 767px) {
  body {
    background-color: #ff0000; /* Red color (for testing) */
    /* Change this color to the desired color for mobile */
  }
}

In this code:

• The default background color for the body is set to #161E25.
• Inside a media query targeting screens with a maximum width of 767 pixels (typical for mobile devices), the background color is changed to #ff0000 (red color for testing purposes). You can replace this with your desired color code.

Place this CSS code in your theme's CSS file or in the Custom CSS section of your theme settings. This will change the background color of your website to the specified color on mobile devices only, while retaining the original color for desktop screens.

[PageFly-Henry]

Hi @MoggedTeams 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

@media (max-width: 767px){
body.gradient {

    background: white !important;

}
}

Hope that my solution works for you.

Best regards,

Henry | PageFly