Make message full screen after submission

Store Design
, , , , , , , , ,

Topic summary

A user wants to modify their contact form’s success message to display full-screen with a white background and black text.

Solutions Provided:

Multiple developers offered CSS code snippets to achieve this customization:

  • Basic styling approach: Add CSS targeting .form-success or .note.form-success with color: #000 and background-color: #fff

  • Full-screen implementation: Include additional properties like position: absolute, width: 100%, height: 100%, and z-index: 1 to make the message cover the entire viewport

Implementation Steps:

  1. Navigate to Online Store → Themes → Customize → Theme Settings (for Custom CSS)
  2. Alternatively: Edit Code → theme.liquid or theme.css file
  3. Insert the provided CSS code
  4. Save changes

All solutions follow similar approaches with minor variations in CSS properties and file placement. The discussion remains open with no confirmation from the original poster about which solution worked.

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

Hi,

id like to change this message to full screen after submission and have the background white with black font.
https://lux360.net/pages/marketplaces?contact_posted=true#contact-us-page

20A313FB-0821-4915-83F5-9F19209AA18A.jpeg
20A313FB-0821-4915-83F5-9F19209AA18A.jpeg1170×2532 145 KB

1 Like
2

Hi @Luxurymrkt

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

#contact-us-page .form-success {
    color: #000;
    background-color: #fff;
    margin-left: -16px;
    margin-right: -16px;
}

Screenshot 2024-10-18 at 08.48.52.png
Screenshot 2024-10-18 at 08.48.52.png1176×970 37 KB

3

You can add the following css code to do full screen.

.form-success{
    color: #000;
    background-color: #FFF;
    border-color: #000;
    padding: 10px;
    margin-bottom: 20px;
    height: 100%;
    position: absolute;
    z-index: 1;
    width: 100%;
}
4

Hi @Luxurymrkt

This is Amelia 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 theme.css

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

p.note.form-success {

color: black;

background: white;

}

Hope that my solution works for you.

Best regards,

Amelia | PageFly

5

@Luxurymrkt ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above

Result:

BSSCommerceB2B_0-1729217863960.png
BSSCommerceB2B_0-1729217863960.png479×920 19.5 KB

If it helps you, please like and mark it as the solution.

Best Regards :blush:

6

Hello @Luxurymrkt
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

.note.form-success {
color: #000 !important;
background: #fff !important;
}

result

1.png
1.png421×606 9.46 KB

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