Caurmen's Mobile Lander Template Question (12)
I am having following errors while viewing in my Laptop and in Samsung Galaxy S3 in landscape mood. Appreciate if someone please correct the code for me:
First of all: The bullet points are overlapping onto the image and need a little space in between. There is something to do with the following code, maybe I need to add a padding tag...I am not sure...
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned About Your Dating Situation?</li><li>Looking For Love?</li><li>Want A Perfect Life With A Perfect Wife? </li></ol>
Secondly, there is a little space required between Visit Now button and the immediate text line above the button to avoid overlapping.
I don't know which part of the codes need to be amended to avoid above errors.
Here is the lander url I am referring to:
http://internetmarketingclinic.com/stm/index.html
Appreciate if someone please help me resolve the issues.
Thanks in advance
Armaan
Not sure but it's likely you will need CSS media queries to account for landscape orientation. I imagine it is the aspect ratio change i.e. page width becomes > height that leads to your layout become unsatisfactory.
The float on the image is causing the problem for you. I'm sure there are a million ways to fix it, but here is one:
You have this media query in your page:
@media screen and (orientation:landscape) {
.image{width:50%; float: left}
}
Add this to it:
.rightside{width:50%;float:right;}
And add the class "rightside" to the div that holds your text. That way the pic will float left and take up 50%, and the text will float right and take up the other half.
Then you'll need to clear the floats, so add this to your css:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
and add the clearfix class to your container div.
You'll probably want to add some padding to the div that holds your text to make it look a little nicer, but hopefully that helps.
Hi Redux,
Thanks for the help. I am at work right now and I will try this once I'm in home. I will keep you posted.
Thank you once again.
Hi Redux,
I have tried to follow exactly what you have said but the result got almost near to satisfactory. The body became full black and the top header text moved left a bit. I am almost closed. Just a small fix on the code should make it a go...can you please advise where I've done wrong? Here is the code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Date Asians On The Go!</title>
<style>
h1{ font-size: 1.5rem;}
h2{ font-size: 1.2rem;}
html {font-size: 12pt}
.image{background-image:url('asiandating.jpg'); background-size: cover; width:80%; max-width: 80%; margin: 0 auto}
.padding{padding-top: 69%;}
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
color: #ffffff;
padding: 2% 5%;
background: -moz-linear-gradient(
top,
#53fc53 0%,
#007311);
background: -webkit-gradient(
linear, left top, left bottom,
from(#53fc53),
to(#007311));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #00b80c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
text-shadow:
0px -1px 0px rgba(0,0,0,1),
0px 1px 0px rgba(255,255,255,0.2);
}
@media screen and (orientation:landscape) {
.image{width:50%; float: left}
.rightside{width:50%;float:right;}
}
@media only screen and (orientation: portrait) and (max-height: 854px){html{font-size:11pt;}}
@media only screen and (orientation: portrait) and (max-height: 480px){html{font-size:9pt;}}
@media only screen and (orientation: portrait) and (max-height: 320px){html{font-size:8pt;}}
@media only screen and (orientation: portrait) and (max-height: 800px){html{font-size:10pt;}}
@media only screen and (orientation: portrait) and (max-height: 1280px){html{font-size:14pt;}}
@media only screen and (orientation: portrait) and (max-height: 1920px){html{font-size:16pt;}}
@media only screen and (orientation: portrait) and (max-height : 1024px){html{font-size:12pt;}}
@media only screen and (orientation: landscape) and (max-height: 1280px){html{font-size:14pt;}}
@media only screen and (orientation: landscape) and (max-height: 1920px){html{font-size:16pt;}}
@media only screen and (orientation: landscape) and (max-height: 1024px){html{font-size:12pt;}}
@media only screen and (max-width: 290px) {
.image{background-image:url('asiandatingsmall.jpg') }
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<h1>Tired Of Being Single?</h1>
<div class="image"><div class="padding"><div class="rightside"></div></div></div>
<div class="rightside" style="text-align: left; margin: 0 auto"><ol><li>Concerned About Your Dating Situation?</li><li>Looking For Love?</li><li>Want A Perfect Life With A Perfect Wife? </li></ol>
<h2>You Are Not Alone...Don't Be Shy...Come Find Your Love Here!</h2><p style="text-align: center">
<a href="http://tracking.kingmb.com/aff_c?offer_id=1043&aff_id=2297" class="css3button" aign="center">Visit Now!</a>
<br clear='all'/><script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script></div></body>
Here is the first code before corrections.....can you find the mistake?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Date Asians On The Go!</title>
<style>
h1{ font-size: 1.5rem;}
h2{ font-size: 1.2rem;}
html {font-size: 12pt}
.image{background-image:url('asiandating.jpg'); background-size: cover; width:80%; max-width: 80%; margin: 0 auto}
.padding{padding-top: 69%;}
body {background-color: #222}
.container {background-color: #eee; border: thin red dotted; margin: 0 auto; width: 96%; text-align: center;}
.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
color: #ffffff;
padding: 2% 5%;
background: -moz-linear-gradient(
top,
#53fc53 0%,
#007311);
background: -webkit-gradient(
linear, left top, left bottom,
from(#53fc53),
to(#007311));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #00b80c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
text-shadow:
0px -1px 0px rgba(0,0,0,1),
0px 1px 0px rgba(255,255,255,0.2);
}
@media screen and (orientation:landscape) {
.image{width:50%; float: left}
}
@media only screen and (orientation: portrait) and (max-height: 854px){html{font-size:11pt;}}
@media only screen and (orientation: portrait) and (max-height: 480px){html{font-size:9pt;}}
@media only screen and (orientation: portrait) and (max-height: 320px){html{font-size:8pt;}}
@media only screen and (orientation: portrait) and (max-height: 800px){html{font-size:10pt;}}
@media only screen and (orientation: portrait) and (max-height: 1280px){html{font-size:14pt;}}
@media only screen and (orientation: portrait) and (max-height: 1920px){html{font-size:16pt;}}
@media only screen and (orientation: portrait) and (max-height : 1024px){html{font-size:12pt;}}
@media only screen and (orientation: landscape) and (max-height: 1280px){html{font-size:14pt;}}
@media only screen and (orientation: landscape) and (max-height: 1920px){html{font-size:16pt;}}
@media only screen and (orientation: landscape) and (max-height: 1024px){html{font-size:12pt;}}
@media only screen and (max-width: 290px) {
.image{background-image:url('asiandatingsmall.jpg') }
}
</style>
</head>
<body>
<div class="container">
<h1>Tired Of Being Single?</h1>
<div class="image"><div class="padding"></div></div>
<div style="text-align: left; margin: 0 auto"><ol><li>Concerned About Your Dating Situation?</li><li>Looking For Love?</li><li>Want A Perfect Life With A Perfect Wife? </li></ol>
<h2>You Are Not Alone...Don't Be Shy...Come Find Your Love Here!</h2><p style="text-align: center">
<a href="http://tracking.kingmb.com/aff_c?offer_id=1043&aff_id=2297" class="css3button" aign="center">Visit Now!</a>
<br clear='all'/><script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script></div></body>
yep, looks like you just need to add the clearfix class to your container div and it should be good.
ie - <div class="container clearfix">
let me know if that works!
Hi Redux,
Thanks for the response. I have added tthe clearfix code but probably placed it in the wrong place. It didn't work.
Can you correct me from the code above? Did i place it right?
Thanks
sure - here is your code above with the added class in red.
Originally Posted by armaanreza
I have tried to accomplish as you have advised but the something gone wrong. See here http://internetmarketingclinic.com/stm/index.html
The body color has changed to black and the page layout on the right has moved to left.
Thanks
Hi Redux,
Let me try update the code as you have corrected above and see if it works now. I will post the output in a moment.
Thanks a million.
Hi Redux,
Guess what! It worked 
http://internetmarketingclinic.com/stm/index.html
Awesome! Thanks a lot 
Home > Paid Traffic Sources > Mobile