Home > Questions and Answers > General Questions

Setting Up A Mobile Lander - help! (28)

05-12-2014 06:03 AM #1 jaime (Member)
Setting Up A Mobile Lander - help!

I'm making this awesome lander from scratch.
1. How do I properly upload a landing page on my server?

05-12-2014 10:27 AM #2 zeno (Administrator)

Export/save as HTML or PHP and upload it via FTP to your server.

Use something like FileZilla.

Make a folder on your site for the lander to keep things organised.

As for connecting to your server... you will likely need to go to your Cpanel and find the FTP info.

05-12-2014 12:33 PM #3 gamble (Member)

Originally Posted by jaime

I'm making this awesome lander from scratch.
1. How do I properly upload a landing page on my server?

Originally Posted by zeno

Alternatively, you can compress the landing page files into a .zip file on your computer, then upload the .zip file to the File Manager in cPanel. Just upload and unzip the file within File Manager, and make sure it goes into the folder that you want. Then delete the .zip file from the directory.

If you aren't familiar with FTP, it's something you should learn and get comfortable with. The method I just described works fine though, if you want to get the files up there quick and play around with FTP later

05-16-2014 04:45 PM #4 jaime (Member)

I uploaded the file to my server and looks like this. However, i can only access it from my pc.

[edited - it's not a good idea to tell people the IP of the server where you're running landers, for a few reasons - caurmen

1. Any ideas why this is a ftp://? Shouldn't it be for example http://www.mecampaigns.biz/public_ht...lelander.html?

You can grab the image I was using from here.

2. I grabbed it from http://i.imgur.com/soNDhvv.jpg, Where do I paste it?

05-16-2014 04:57 PM #5 jaime (Member)

To answer my own question:

1. I realize I was just trying to access it wrong. The correct URL is: http://mecampaigns.biz/mobilelander.html So, problem solved.

2. Should I paste this link http://i.imgur.com/soNDhvv.jpg into the previous code? Which is the following??

<title>Get Rid Of Your Debt!</title>
<style>
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 900px; text-align: center;}
</style>
</head>

<body>
<div class="container">
<h1>Get Rid Of Your Debt Completely In Under 60 Days!</h1>
<img src="Family-Jumping.jpg">
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>

</div></body>

I guess my question is how to insert an image

05-16-2014 05:26 PM #6 caurmen (Administrator)

1. That should indeed be an http:// address. Check with your web hosts which directory you should be putting web pages in - it may not be the one you think.

2. You'll need to upload it to the same directory as your lander, then reference it in your lander with an <img> tag - like <img src="soNDhvv.jpg">

Feel free to PM me if you want someone to check if your lander is visible!

05-23-2014 05:26 AM #7 jaime (Member)

C,

[It's not a great idea to link to your live server, because people can try and hack it, etc. Removed live links - caurmen]

I've also referenced it the following: "<img src="image1.jpg">" .....but the image still doesn't show.
Do you have an idea why?

05-23-2014 10:15 AM #8 gunnar (Member)

hi jaime,

in the html source you referenced "Family-Jumping.jpg", but your image is named image1.jpg.
You have to change the html or rename the image accordingly.

05-23-2014 05:00 PM #9 jaime (Member)

here is how the code looks, but the image still doesn't show.

"<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Get Rid Of Your Debt!</title>
<style>
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
</style>
</head>

<body>
<div class="container">
<h1>Get Rid Of Your Debt Completely In Under 60 Days!</h1>
<img src="image1.jpg">
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>

</div></body>"

What else can I try? Thanks

05-23-2014 05:12 PM #10 caurmen (Administrator)

Are you sure that's the version you have uploaded to your site? Go to the page on your server, then right-click and choose "View Source". Check that what you see there is the same as what you just pasted above.

05-23-2014 05:18 PM #11 jaime (Member)

Caurmen,

Yeap. The source on my server seems to look the same:

"<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Get Rid Of Your Debt!</title>
<style>
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
</style>
</head>

<body>
<div class="container">
<h1>Get Rid Of Your Debt Completely In Under 60 Days!</h1>
<img src=image1.jpg>
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>

</div></body>"

05-23-2014 05:41 PM #12 superboi (Member)

Just use the img from imur.com you get free CDN...

replace:

with

05-23-2014 05:52 PM #13 jaime (Member)

Awesome. Thanks Superboi

05-23-2014 06:31 PM #14 jaime (Member)

Upload, reload. Now it's the right width, but the image is too big and pushes off the edge of the screen:

Making Your Images Fluid

Images in mobile design are a massive, massive pain in the ass. We'll look at this more next week. In general, you've got the choice between having them as small as possible, or having them look just right.

We'll take the simplest option for now, although it will cost us a bit of page loading speed. Add the following line just after <style>:

Code:
.image{width:80%; max-width: 80%;}
And change the line

Code:
<img src="Family-Jumping-I5.jpg">
to

Code:
<img src="Family-Jumping-I5.jpg" class="image">

This is exactly where I am. I have done all these steps but the image still is too big and pushes the edge of the screen.

...thanks..

05-23-2014 06:42 PM #15 superboi (Member)

replace:

with

and make sure you did that image class in css:

Code:
.image{width:80%; max-width: 80%;}

05-23-2014 06:56 PM #16 jaime (Member)

and make sure you did that image class in css:

??

Still no luck. Here is how the code looks:

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Get Rid Of Your Debt!</title>
<style>.image{width:80%; max-width: 80%;}
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
</style>.image{width:80%; max-width: 80%;}
</head>

<body>
<div class="container">
<h1>Get Rid Of Your Debt Completely In Under 60 Days!</h1>
<img src="http://i.imgur.com/soNDhvv.jpg" alt="Jumping" class="image">
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>

</div></body>

05-23-2014 07:08 PM #17 bbrock32 (Administrator)

^ Hey mate , I just copy pasted the code from your post above and worked fine.

What's the issue you are having?

05-23-2014 07:43 PM #18 jaime (Member)

bbrock32, the issue is that the image still is too big and pushes the edge of the screen. How do i make it fit just right

05-23-2014 09:08 PM #19 dwel999 (Member)

Put .image{width:80%; max-width: 80%;} inside the style tag, you have it after you close the style.

05-23-2014 09:20 PM #20 superboi (Member)

Found the problem:

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Get Rid Of Your Debt!</title>
<style>.image{width:80%; max-width: 80%;}
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
</style>.image{width:80%; max-width: 80%;}
</head>

<body>
<div class="container">
<h1>Get Rid Of Your Debt Completely In Under 60 Days!</h1>
<img src="http://i.imgur.com/soNDhvv.jpg" alt="Jumping" class="image">
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>

</div></body>

you closed the style without including the image

so the red text above change to:

.image{width:80%; max-width: 80%;}
</style>

05-23-2014 09:23 PM #21 superboi (Member)

I think you should start studying basic html first... or hire a coder to do it for you...

05-24-2014 03:53 AM #22 zeno (Administrator)

https://codebabes.com/

05-24-2014 12:16 PM #23 caurmen (Administrator)

This was getting super-long, so I've moved the discussion into its own thread!

05-27-2014 04:53 AM #24 jaime (Member)

Codebabes great tool, thanks!
I have added

.image{width:80%; max-width: 80%;}

inside the style tag... But the image still goes way off a phone's screen.. What am I doing wrong?

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Get Rid Of Your Debt!</title>
<style>.image{width:80%; max-width: 80%;}
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
</style>
</head>

<body>
<div class="container">
<h1>Get Rid Of Your Debt Completely In Under 60 Days!</h1>
<img src="http://i.imgur.com/soNDhvv.jpg" alt="Jumping" class="image">
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>

</div></body>

Also, I've updated the local file and even after right click and 'refresh' filezilla it's caching the old version of the file. I've even changed the "Get rid of your debt.." to "Find Singles..." but filezilla is not showing the new edited file.. Where is the problem?

05-27-2014 07:48 AM #25 zeno (Administrator)

Are you overwriting the file on the server...?

Not sure where the problem is, your CSS looks ok. Perhaps the browser is processing CSS sequentially - try moving the image class to below the container class in the style section.

I wouldn't normally consider that an issue but I don't know what mobile browsers are up to... at the moment, if it did process sequentially, the width of the image is set to some % of the surrounding container before the container is actually given a width.

In any case, preview it on your computer first to make sure it is working and that your uploading files correctly, rather than wasting time on a slower loading phone.

05-27-2014 08:30 AM #26 jaime (Member)

Zeno,
Yes, I'm overwriting the file. I have this code updated/refreshed, but filezilla keeps proccesing the old one.

head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Get Rid Of Your Debt!</title>
<style>
html {font-size: 12pt}
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
.image{width:80%; max-width: 80%;}</style>
h1{ font-size: 1.5rem;}
h2{ font-size: 1.2rem;}
</head>

<body>
<div class="container">
<h1>Find Singles NOW!</h1>
<img src="http://i.imgur.com/soNDhvv.jpg" alt="Jumping" class="image">
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned about your debt situation?</li><li>Worried about losing the assets you worked so hard for?</li><li>Scared at the prospect of Bankrupcy?</li></ol>
<h2>You are currently In Debt And Would Like To Be Out Of Debt in 60 Days?</h2><p style="text-align: center">
<a href="redirect.php">Do It Now!</a>

</div></body>

Somehow the file is not being refreshed

05-27-2014 09:15 AM #27 zeno (Administrator)

What do you mean FileZilla keeps processing the old one? It your browser that is loading the file.

FileZilla is just uploading something from your PC. Are you 100% certain the file you are uploading is the one you just edited? Why not look at this locally on your PC to get it working in your normal browser before uploading?

If you have, and you have uploaded it, overwritten what's on your server with what's on your PC, load that live file in your PC browser instead. Is the source code updated? If not then do a non-cached refresh (Ctrl+F5).

If it is still not updated, it is 99.9% likely something simple that you are doing (or not doing!) that you have overlooked.

05-28-2014 12:57 AM #28 jaime (Member)

Z, thank you!! I found the problem. I have been updating the file under the wrong directory. (mobilelander.html, instead of public_html)

Caurmen, I sent you a pm

Home > Questions and Answers > General Questions