I was successful in coding a pop-up for an email list sign up on the homepage of my website. However, I’m running into an issue where the pop-up is off center, which looks not great on the desktop, but on mobile it makes it impossible to enter data into the email field.
Desktop:
Mobile:
I’m not able to pinpoint what may be causing the pop-up to appear off-center. Is there a chance that some part of the Dawn Theme is interfering? Would someone look through these segments of the base.css and theme.liquid and tell me what needs adjusting?
Website: greatlakeslittles.com
base.css
/* Popup container */
.subscribe-me {
display: none;
width: 700px;
height: auto;
max-width: 90%;
background: #fff;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
z-index: 1999;
padding: 0px;
box-sizing: border-box;
}
.subscribe-me .popup-content {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.subscribe-me .popup-image {
width: 250px;
height: auto;
object-fit: cover;
border: none;
padding: 0;
margin: 0;
}
.subscribe-me .popup-text {
flex: 1;
padding-top: 80px;
padding-right: 30px;
text-align: center;
display: block; /* Ensures vertical stacking of children */
}
.sb h2 {
font-size: 30px;
}
.sb p {
font-size: 24px;
}
.sb-close-btn {
position: absolute;
right: 10px;
top: 10px;
color: #ccc;
z-index: 2000;
}
/* Target the email field wrapper and input */
.subscribe-me .popup-text .newsletter-form__field-wrapper {
text-align: left;
margin: 0;
padding: 0;
}
.subscribe-me .popup-text .field__input {
width: 100%;
text-align: left;
margin: 0;
padding: 0;
}
/* Mobile styles */
@media (max-width: 900px) {
.subscribe-me {
width: 90%;
max-width: 500px;
height: 600px;
padding: 0px;
}
.subscribe-me .popup-content {
flex-direction: column;
align-items: center;
gap: 10px;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.subscribe-me .popup-image {
width: 100%;
height: 60%;
object-fit: cover;
object-position: 10% 25%;
border: none;
padding: 0;
margin: 0 auto;
display: block;
}
.subscribe-me .popup-text {
width: 100%;
padding: 10px 0;
box-sizing: border-box;
text-align: center;
display: block;
}
.subscribe-me .popup-text .newsletter-form__field-wrapper {
text-align: left;
margin: 0;
padding: 0;
}
.subscribe-me .popup-text .field__input {
width: 100%;
text-align: left;
margin: 0;
padding: 0;
}
.newsletter-form__field-wrapper {
width: 100%;
align-content: left;
}
}```
**theme.liquid**
```{% if template == 'index' %}
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<div class="subscribe-me" style="display:none;">
<div class="popup-content">
<a href="#close" class="sb-close-btn">x</a>
<img src="{{ '480575858_10161578420727620_8717453456922511127_n_1.jpg' | file_url }}" alt="Newsletter Image" class="popup-image" loading="lazy">
<div class="popup-text">
<h2>Subscribe to our email list</h2>
<p>and get 15% off your first order!</p>
{%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter-form__field-wrapper">
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="ContactFooter-error"
{% elsif form.posted_successfully? %}
aria-describedby="ContactFooter-success"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
{%- endif -%}
{%- endform -%}
</div>
</div>
</div>
{% endif %}```