I need some serious help here... I have had a lot requests for horizontal opt-in forms. Im using gravity forms { EXAMPLE OF ONE OF MY DESIGNS IN QUESTION } how can I make this responsive? It looks like crap on mobile or tablet { big problem } Do I have to set new styles for each size screen? { don't laugh } responsive design is new to me when coding it on my own. Thanks!
You will typically need separate stylings for separate devices. Can you provide a link to your site? I'd like to get a better idea of what you're looking for.
sure! { I guess it didn't link the first time } located at bottom of the page. http://youandtheyogamat.com/lets-work-together/
You've made one of the classic blunders in designing responsive -- attempting to use a fixed height fixed width image as a background. You should probably use a media query to strip that image off and give a solid background when the page is smaller... or get rid of it entirely since if you switch that form to a proper semi-fluid and elastic design it's just "not viable for web deployment" Now, that said, you've missed a number of stepping stones on the way to building a responsive layout, in that you didn't start out with a semi-fluid and elastic page. The absurdly undersized fixed metric (px) fonts and all the things measured in fixed pixel sizes are a hefty chunk of what's going to bite you here. The WCAG says to use fluid widths and %/em fonts for a reason after all. Likewise the legibility issues caused by the use of serif fonts on screen isn't helping either. Serif is for print, sans is for screen. Of course the HTML 5 bloat, tables for layout, gibberish use of numbered headings, and endless classes for nothing asshattery that turdpress has the giant set of brass to call markup should probably be rectified as well. ... and I've never heard of "gravity forms" -- but that markup is atrocious with the labels outside the FORM, the form not working scripting disabled, scripted 'placeholder' type nonsense creating false simplicity since those are NOT replacements for labels... I'd throw that entire form in the trash and start over with semantic markup of a COMPLETE form. (with things like fieldsets, labels actually pointing at things, etc).
You need to use media queries as above has said. So in your CSS you need to add: @media (max-width:1200px) { // apply css when the screen is smaller than 1200px (large tablets) } @media (max-width:768px) { // apply css when the screen is smaller than 768px (mobiles, portrait tablets) } @media (max-width:550px) { // apply css when the screen is smaller than 550px (mobiles) } Code (markup): To get you started with an example: @media (max-width:550px) { .gform_wrapper .ginput_complex .ginput_left{ width:100%; float:none; } } Code (markup): So what we are doing is: when the screen size is less than 550px we are changing the wrapper around input elements to 100% and removing the float so it fills the page rather than trying to both fit on one line. Hope that helps. Let me know if you need any more help.
@HuggyStudios, I'm not sure that actually addresses the problem since on mobile that background image HAS to go too -- and really that's an attempt at silver bullet fixes that are really just throwing good code after bad. @Kayla Rose, did you change the markup on that page? You now seem to have a form inside a form, both with the same submits and hiddens! (faulty copy/paste perhaps?) In any case to show you what I mean, where you have this ungodly train wreck of 4.87k of markup and scripttardery: <p style="text-align: center;"> <div class='gf_browser_opera gform_wrapper teacher_optin_wrapper' id='gform_wrapper_7' ><form method='post' enctype='multipart/form-data' id='gform_7' class='teacher_optin' action='/lets-work-together/'> <div class='gform_heading'> <span class='gform_description'><p style="text-align: center;color:#ffffff;">Ready to master the before, during, and after portions of your private yoga sessions? Make a larger impact with your clients:</p> <p style="text-align: center;color:#ffffff;">Join <strong>The Teacher's Toolbox</strong> +<em> grab your free teaching check</em>lists here.</p></span> </div> <div class='gform_body'> <ul id='gform_fields_7' class='gform_fields top_label description_above'><li id='field_7_3' class='gfield gfield_html gfield_no_follows_desc' ><form method='post' enctype='multipart/form-data' id='gform_7' class='teacher_optin' action='/lets-work-together/'> <div class='gform_body' style='width: 100%;'> <div id='kr_one'> <input name='input_1' id='input_7_1' type='text' value='name' class='medium' tabindex='1' /> </div> <div id='kr_two'> <input name='input_2' id='input_7_2' type='text' value='email' class='medium' tabindex='2' /> </div> <div id='kr_three'> <input type='image' src='http://youandtheyogamat.com/wp-content/uploads/2014/04/YandTYM_button.png' id='gform_submit_button_7' class='gform_image_button' alt='Submit' tabindex='3' onclick='if(window["gf_submitting_7"]){return false;} window["gf_submitting_7"]=true; '/> </div> </div> <div class='ginput_container' style="display: none;"> <input name='input_3' id='input_7_3' type='text' value='' /> </div> <div class='gform_footer top_label'> <input type='hidden' class='gform_hidden' name='is_submit_7' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='7' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_7' value='WyJbXSIsIjc0YjllYzY4ODkzNzZlN2YxZjhkNWYzMWM4ZjM3NjcwIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_7' id='gform_target_page_number_7' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_7' id='gform_source_page_number_7' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form></li><li id='field_7_4' class='gfield gform_validation_container' ><label class='gfield_label' for='input_7_4'>Comments</label><div class='ginput_container'><input name='input_4' id='input_7_4' type='text' value='' /></div><div class='gfield_description'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer top_label'> <input type='image' src='http://youandtheyogamat.com/wp-content/uploads/2014/04/YandTYM_button.png' id='gform_submit_button_7' class='gform_image_button' alt='Submit' tabindex='1' onclick='if(window["gf_submitting_7"]){return false;} window["gf_submitting_7"]=true; '/> <input type='hidden' class='gform_hidden' name='is_submit_7' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='7' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_7' value='WyJbXSIsIjc0YjllYzY4ODkzNzZlN2YxZjhkNWYzMWM4ZjM3NjcwIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_7' id='gform_target_page_number_7' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_7' id='gform_source_page_number_7' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [7, 1]) } ); </script></p> Code (markup): It should probably read something more like this 881 bytes: <form id="teacherOptIn" method="post" enctype="multipart/form-data" action="/lets-work-together/"> <div><!-- curve sandbag --></div> <p> Ready to master the before, during, and after portions of your private yoga sessions?<br /> Make a larger impact with your clients: </p><p> Join <strong>The Teacher's Toolbox</strong> and <em>grab your free teaching checklists</em> here. </p> <fieldset> <label for="teacherOptInName"> Name:<br /> <input type="text" id="teacherOptInName" name="name" /> </label> <br /> <label for="teacherOptInMail"> E-Mail Address:<br /> <input type="text" id="teacherOptInMail" name="email" /> </label> <br /> <input type="submit" value="subscribe" class="submit" /> <input type="hidden" name="formHash" value="WyJbXSIsIjc0YjllYzY4ODkzNzZlN2YxZjhkNWYzMWM4ZjM3NjcwIl0=" /> </fieldset> </form> Code (markup): Basically 1/6th the code -- That's how much bloated nonsense you have in there -- again whatever that 'gravity forms' crap is, do yourself a HUGE favor and forget it. Admittedly, the above code would NOT be compatible with the existing back-end either -- but that's probably a good thing too since if the front-end is such a massive train wreck of ineptitude, I don't even want to THINK about how bad the server code handling the result is. Whatever you've got behind that probably needs to be tossed too... Gravity... good name for it, it's so obviously mired and stuck in the mud... I put a live copy of the form with some accompanying CSS to replicate your appearance without using images -- IE 8 and lower will show solid boxes, oh well. The CSS uses media queries to adjust the layout as the available width changes, and the whole thing is elastic instead of the utterly useless and crippled px metric fonts you had. http://www.cutcodedown.com/for_others/KaylaRose/formDemo.html as with all my examples the directory: http://www.cutcodedown.com/for_others/KaylaRose/ is unlocked for easy access to the bits and pieces. Though, good luck integrating that into the idiotic halfwit nonsense turdpress has the giant brass monkey balls to vomit up and call HTML.