So I've been formatting this form and it looks ok on Desktop now. But I need it to change when it's on mobile. It's two elements, one image and one form, side by side. I need them to change to top and bottom when on mobile. Probably a @media query CSS?
I've tried using percentages for widths, but the image size isn't changing and the form component either ends up overlapping it, or it gets cut off...
HTML Code:
<head>
<link rel="stylesheet" href="/assets/signup.css">
</head>
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<div id="image"><img src="images/genesis.gif"></div>
<form action="https://opipets.us17.list-manage.com/subscribe/post?u=3fa8d83aedc08e2a8814c787c&id=27f9c81072&v_id=4140&f_id=00bb56e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Join our Whitelist</h2>
<div >
<label for="mce-EMAIL">Email
</label>
<input type="email" value="" name="EMAIL" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" ></span>
</div>
<div id="mergeRow-gdpr" >
<div >
<span>
<fieldset name="interestgroup_field">
<label for="gdpr_90860"><input type="checkbox" id="gdpr_90860" name="gdpr[90860]" value="Y" ></label>
</fieldset>
<p><b>I agree to receive communications from Opis Group Ltd</b></p>
</span>
<br>
<p>Your privacy is our policy. Occasionally, we'll contact you about our products and services, and other content that may be of interest. You can unsubscribe at any time.</p>
<p>We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. </p>
<br>
<p><a href="https://mailchimp.com/legal/terms" target="_blank">Learn more about Mailchimp's privacy practices here.</a></p>
</div>
</div>
<div hidden="true"><input type="hidden" name="tags" value="6456416,6456520"></div>
<div id="mce-responses" >
<div id="mce-error-response" style="display:none"></div>
<div id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3fa8d83aedc08e2a8814c787c_27f9c81072" tabindex="-1" value=""></div>
<div ><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" ></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
CSS Code:
@font-face {
font-family: museo-sans;
src: url(/fonts/museosans_300.otf) format("opentype");
font-display: auto;
font-style: normal;
font-weight: 300;
font-stretch: normal
}
@font-face {
font-family: museo-sans-bold;
src: url(/fonts/museosans_700.otf) format("opentype");
font-display: auto;
font-style: normal;
font-weight: 700;
font-stretch: normal
}
@font-face {
font-family: bwstretch;
src: url(/fonts/BWSTRETCH-BLACK.OTF) format("opentype");
font-display: auto;
font-style: normal;
font-weight: 800;
font-stretch: normal
}
a {
font-family: museo-sans-bold;
color: #ffc860;
}
h2 {
font-family: bwstretch;
text-align: center;
text-transform: uppercase;
font-size: 3vh !important;
}
body {
font-size: 1.5vh;
background-color: #191f43;
font-family: museo-sans;
color: #191f43;
}
#mc_embed_signup {
width: 90% overflow: auto;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #191f43;
}
div.mc-field-group {
width: 90% overflow: auto;
}
div.mc-field-group label {
font-size: 2vh;
font-family: museo-sans-bold;
width: auto;
}
div.mc-field-group input {
font-size: 1.5vh;
font-family: museo-sans-bold;
width: 90%;
color: #191f43;
border: 0;
height: 30px;
border-radius: 5px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 10px;
}
#image {
max-width:30% overflow: auto;
background-color: #191f43;
}
#content__gdpr {
display: flex;
justify-content: center;
align-items: center;
}
#mc_embed_signup {
width: 90%;
background-color: #191f43;
color: #ffc860;
font-family: museo-sans;
}
#mc-embedded-subscribe-form input[type=checkbox]{
display: flex;
width: auto;
margin-right: 0px;
margin-left: -15px;
margin-top: -2px;
}
#mergeRow-gdpr {
margin-top: 20px;
font-size: 1.5vh;
}
#mergeRow-gdpr fieldset label {
font-weight: normal;
}
#mc-embedded-subscribe-form .mc_fieldset {
border:none;
min-height: 0px;
padding-bottom:0px;
}
input.button {
color: #191f43;
background-color: #ffc860;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 45px;
font-family: bwstretch;
text-transform: uppercase;
font-size: 1.5em;
border: 0;
border-radius: 40px;
}
span {
display: flex;
align-items: center;
}
CodePudding user response：
@Media works like this:
@media (max-width: 768px) {
h2{
background-color: #ffc860;
}
}
768px is generally regarded as a breaking point between vertical(smartphone) view and horizontal(Tablet, Desktop) view.
I would recommend to do every class twice one for bellow 768px screen width and one for above.
CodePudding user response：
I've had some progress:
@media (max-width: 600px) {
#image {
height: 40%;
width:80%;
background-color: #191f43;
align-items: center;
left: 50%;
margin-right: -50%;
}
#mc_embed_signup {
height: 100%;
width: 80%;
background-color: #191f43;
color: #ffc860;
font-family: museo-sans;
display: block;
}
}
