Jump to content

Archived

This topic is now archived and is closed to further replies.

jdbrasesco

Issues with Mobile Responsive Design

Recommended Posts

jdbrasesco

I'm experiencing some issues with my site www.hungryitalian.com on mobile devices.  I've attached a couple of screen captures.  Same issue on iPhone and iPad.  In both landscape and portrait the text is being cut off on the left.  In portrait, the sections are not going full screen and there is empty white space on the right.  Please advise.

 

 

 

IMG_0479.PNG

IMG_0480.PNG

Share this post


Link to post
Share on other sites
Andrew

What are you using for the form? Appears it is using a static width and isn't responsive ...i.e. not PL

Share this post


Link to post
Share on other sites
hibbsy78

@jdbrasesco You may need to add something like this to correct the form:

.wpcf7-form-control { max-width: 100%; }

 

Share this post


Link to post
Share on other sites
jdbrasesco

@Andrew The first item on the page is a single item Flick Slider.  Below is a container with two side by side text boxes.  The one on the left is just text.  The one on the right is an embed code from mailchimp.  Neither the PL text box or the mailchimp embed seem to be responsive.

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:000; clear:left; font:14px Helvetica,Arial,sans-serif;  width:500px;}
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//hungryitalian.us12.list-manage.com/subscribe/post?u=d03ff4eb70a483038e229d1a2&amp;id=149c5b08fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address </label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name </label>
	<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
	<label for="mce-LNAME">Last Name </label>
	<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" 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;"><input type="text" name="b_d03ff4eb70a483038e229d1a2_149c5b08fb" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

I'm open to other suggestions if there's a better way to do this.  PL5 should really have a responsive Section like SplashUp that supports mail list sign ups (Mailchimp, Aweber, etc... would be ideal).  Seems like a common feature on many blogs.

Share this post


Link to post
Share on other sites
Andrew

first, this is the type of support i was hoping to avoid in the beta period. 

Second, is clearly assigns a width of 500px to the form in your script.

Share this post


Link to post
Share on other sites

×