want to change colour of a box on my website phone version

Store Design
,

Topic summary

A user wants to change the background color of a product description box to white on the mobile version of their Shopify store, referencing another website as an example.

Solutions Provided:

Two community members offered CSS code solutions:

  • First approach: Add CSS to section-main-product.css file targeting the .tab-list element with background: white !important within a media query for screens under 749px

  • Second approach: Insert CSS code in theme.liquid file before the </body> tag, targeting .product .tab-list with background: #fff !important for screens under 767px

Follow-up Issue:

The original poster reported the first solution didn’t work and requested additional help to reduce the gap between the “Add to Cart” button and the description box on mobile.

A modified CSS solution was provided targeting .product__info-container .product-form with margin: 2.5rem 0 0 0 !important to address the spacing issue.

Status: The discussion remains open with no confirmation that either solution successfully resolved the issues.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

this is my website https://swawe.store/products/embroidered-porsche-gt3rs-t-shirt
I want the description box look like this with white background like this website https://bluorng.com/products/crystal-white-t-shirt-copy?pr_prod_strat=jac&pr_rec_id=e4d71ad72&pr_rec_pid=9431594303768&pr_ref_pid=9431865491736&pr_seq=uniform on phone

IMG_3556.jpg
IMG_3556.jpg1170Ă—401 45.4 KB

IMG_3555.jpg
IMG_3555.jpg1170Ă—1798 106 KB

2

Hello @attackon
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> section-main-product.css
add this code at the end of the file.

@media (max-width: 749px) {
.tab-list {
background: white !important;
}
}

result

17.png
17.png414Ă—756 14 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
3

Hello @attackon

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .product .tab-list { background: #fff !important; } }

niraj_patel_0-1725089168744.png
niraj_patel_0-1725089168744.png318Ă—311 8.7 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
4

didn’t work

5

can you also decrease the gap coming on phone between add to cart and and this description box

6

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .product__info-container .product-form{ margin: 2.5rem 0 0 0 !important; } }

niraj_patel_0-1725091547541.png
niraj_patel_0-1725091547541.png315Ă—361 6.5 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.