kindly help me adjust left padding for pop up form on mobile view without disturbing desktop setting

Technical Q&A
1

kindly help me adjust left padding for pop up form on mobile view without disturbing desktop settings

my pop up form code is here

/* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: relative; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 20px; /* Location of the box */ left: 700px; top: 0px; width: 25%; /* Full width */ height: 25%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgb(256,256,256,0.7); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: rgba(128,128,128,0.3); margin: auto; padding-top: 20px; padding-left: 20px; border: 1px solid #000000; width: 80%; } close { color: #000000; float: left; font-size: 36px; font-weight: bold; } .close:hover, .close:focus { color: #000000; text-decoration: none; cursor: pointer; }

We are Here to HELP!

Talk to US...

×

{% form ‘contact’ %}

{% if form.posted_successfully? %}

{{ ‘contact.form.post_success’ | t }}

{% endif %}

{{ form.errors | default_errors }}

{{ ‘contact.form.name’ | t }}

{{ ‘contact.form.email’ | t }}

{{ ‘contact.form.phone’ | t }}

{{ ‘contact.form.message’ | t }}

{% if form.body %}{{ form.body }}{% endif %}

{% endform %}

2

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

you can try with this css code it helps you to set up on phone without affecting desktop:

@media not all and (min-resolution:.001dpcm)

{ @supports (-webkit-appearance:none) {

@media (max-width:767px){

Left: 700px;

}

}}

Let me know if this solves your problem or if you need further help!

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

PageFly