DAWN THEME: HOW TO INCREASE SUBSCRIPTION INPUT WIDTH

[skymochi]

Hi,
Two questions.
1. How do I increase the input width in the typable contents of my subscription box?
2. Above the pagination of 1/2 how do I remove reduce the padding height?

website: www.koredoko.com

[akshay_bhatt]

Hi @skymochi ,

to increaseinput width in subscription box add css to your theme's css file

.subscription-box input[type="text"],
.subscription-box input[type="email"] {
    width: 100%; /* or any desired width like 80%, 300px, etc. */
}
.pagination-wrapper {
    padding-top: 10px; /* adjust this to your desired height */
}

.pagination-wrapper {
    margin-top: 10px; /* adjust as needed */
}

adjust the value as per your requirement

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

[rajweb]

Hey @skymochi ,

To address both adjustments in your subscription box and pagination section, you can add or modify the following CSS in your theme's CSS file (often named theme.scss.liquid , theme.css.liquid, or similar).

1. Increase the Width of the Input Field in the Subscription Box:

To increase the width, target the  #NewletterForm--section--16565348171849_footer ID directly or use the Field _input class if it applies to multiple fields. Here’s the CSS:

#NewsletterForm--sections--16565348171849__footer {
    width: 100%; /* Adjust width as needed (e.g., 80%, 400px) */
    max-width: 400px; /* Set a maximum width if desired */
    padding: 10px; /* Optional: adjust padding for better spacing */
    box-sizing: border-box; /* Ensure padding doesn’t affect overall width */
}

Using width:100% with Max-width allows the field to be responsive. Adjust max-width  to the specific width you want for larger screens.

Result:

2. Reduce Padding Above the Pagination Section:

To reduce the padding above the pagination, inspect your HTML structure to find the wrapper around the pagination. Here’s an example CSS based on a typical structure:

.pagination-container {
    padding-top: 10px; /* Reduce this as needed */
    margin-top: 0; /* Set to 0 if you want no extra space */
}

If .pagination-container doesn’t apply, you can also target the specific pagination controls by modifying the padding or margin for the class of that container. If you share more HTML around the pagination, I can help target it more precisely.

Try adding these rules, save, and refresh the page to check if the adjustments work as expected.

If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma