[Pro] Viewing website on iPhone

Freeway
1

Hi,

I am viewing my website on many different devices to see how it functions. On desktops, laptops and iPads I do not have any problems. But when I view it on my mothers iPhone 5 I notice that the mail chimp sign up form overlaps into the text box above it, blocking and cutting off the text. All of the other pages are fine except that one. I built my site with CSS layout on and there is plenty of space between the HTML markup item box and HTML text box on the contact page. I don’t understand why this is happening.
I am wondering if anyone else has encountered similar issues when viewing their site on an iPhone…and if so how did you resolve the issue?

Jessica

http://www.jessicaliggero.com/contact.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

If you want to avoid overlap of items like this then you will have to create your layout inline.

If you look at the example file I did for the signup form you can copy/cut the Form markup item from the page.

Then click inside your item1 and make sure your cursor is flashing on a new line after the end of the “…boxing events.” text and paste it in.

That way the form becomes part of the layout and will move with the text above.

Just make sure that the Div item1 is wide enough to contain the form items.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Great, it worked. Thanks.

I figured out how to change the font size from 18 to 14 in the CSS but am not sure how to change the text; ‘Email Address’ ‘First Name’ and ‘Last Name’ to bold. My understanding is that I would put:

font-weight: bold;

some where in here…?

#mc_embed_signup{background:#fff; clear:left; font:14px ‘Courier New’,Courier; width:400px;}
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {color: black; font-family: ‘Courier New’,Courier; font-size: 14px; border:3px solid #B3B3B3; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}

Jessica

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Try adding this line to your styles:

#mc_embed_signup label { font-weight: bold; }

That will target the precise tag that you want to affect, without missing and hitting the contents of the fields.

Walter

On Mar 1, 2015, at 11:00 AM, Jessica email@hidden wrote:

Great, it worked. Thanks.

I figured out how to change the font size from 18 to 14 in the CSS but am not sure how to change the text; ‘Email Address’ ‘First Name’ and ‘Last Name’ to bold. My understanding is that I would put:

font-weight: bold;

some where in here…?

#mc_embed_signup{background:#fff; clear:left; font:14px ‘Courier New’,Courier; width:400px;}
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {color: black; font-family: ‘Courier New’,Courier; font-size: 14px; border:3px solid #B3B3B3; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}

Jessica

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

yeah adding that line worked. Thanks.

But I can’t get the text to look right on an iPhone. The 2 sentences above the sign up form break at points. You will have to view it on an iPhone to see it:

http://www.jessicaliggero.com/contact.html

I don’t understand. I have deleted all of the text and re-typed it many times and published but still the lines break on an iPhone. How can I fix this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

This is probably to do with the way the iPhone version of MobileSafari treats body text. If possible, it enlarges it to make it more readable on the small screen. Try making the second text block a single paragraph, rather than force-breaking it at the end of “The Painting Pugilist”. Then, if the sentence wraps to the next line, it won’t look odd.

Walter

On Mar 2, 2015, at 10:08 PM, Jessica email@hidden wrote:

yeah adding that line worked. Thanks.

But I can’t get the text to look right on an iPhone. The 2 sentences above the sign up form break at points. You will have to view it on an iPhone to see it:

http://www.jessicaliggero.com/contact.html

I don’t understand. I have deleted all of the text and re-typed it many times and published but still the lines break on an iPhone. How can I fix this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Thanks. I figured out last night that I had to increase the size of the text box so that the enlarged text on iPhone screens had room to extend.

J

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options