What's your biggest current challenge? Have your say in Community Polls along the right column.

Change color of background on mobile only

Change color of background on mobile only

MoggedTeams
New Member
15 0 0

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.

Replies 2 (2)

Keshan97
Shopify Partner
72 9 23

 

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.

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com

PageFly-Henry
Shopify Partner
1184 335 292

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.