Fixing popup

[TuneToyz]

Hello when I enter my mobile sms in my popup it appears fine but when getting my discount code the design looks really off. Like attached below. I want it to look neater by making the popup wider so the text does not overlap. Here is a link to my popup: https://tunetoyz.com/?popup-preview=true&popup-id=NjExOTA=

 

 

[akshay_bhatt]

Hi @TuneToyz ,

To adjust the width of your popup on your Shopify store so the text doesn’t overlap, you can add custom CSS. Here’s how to make the popup wider and improve text alignment:

1. Locate and Edit Custom CSS:

   • In Online Store > Themes > Edit Code, open the theme.css or theme.scss.liquid file, or add CSS in the custom CSS section if your theme has one.

2. Add Custom CSS for Popup Width:

   • Insert the following CSS to make the popup wider and adjust the text styling:

/* Increase popup width */
.popup-class { /* replace with your popup's class name */
    max-width: 600px; /* Adjust width as needed */
    width: 90%; /* For responsiveness */
    padding: 20px;
}

/* Adjust text size and alignment */
.popup-class h2, .popup-class p {
    font-size: 1.2rem; /* Adjust as needed */
    text-align: center; /* Center text */
}

/* Ensure input fields are aligned neatly */
.popup-class input[type="text"], 
.popup-class input[type="email"],
.popup-class input[type="tel"] {
    width: 100%; /* Full width for mobile compatibility */
    margin-bottom: 10px;
}

/* Adjust button styling */
.popup-class button {
    font-size: 1rem;
    padding: 10px 20px;
    width: 100%; /* Full width on smaller screens */
}

1. • Replace .popup-class with the actual CSS class of your popup container, which you can inspect in the browser (right-click on the popup and select Inspect).

2. Preview and Adjust:

   • Save the changes, then refresh your popup preview to see the adjustments. Modify the width (e.g., max-width:600px) and font sizes as needed.

• This should give your popup a cleaner, more aligned look across devices

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[TuneToyz]

hello this does not work