What Code is Messing Up my CSS?

Hi Expert,

Somehow the website here has some conflicting margin issues on the top with the text. The CKeditor is also conflicting with the footer, which is supposed to be always at the bottom.

What code is affecting this? I've tried for 3 hours trying to debug using dev tools.

Thank you for your time!
Andy_FangAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
The text is controlled by the margin-top in
.margin100t {}
line 9033

As for the footer is it supposed to be sticky or fixed?
Are you trying to do this
http://www.cssstickyfooter.com/
0
Andy_FangAuthor Commented:
As for the footer is it supposed to be sticky or fixed?
Are you trying to do this
http://www.cssstickyfooter.com/

Yes! That's exactly what I'm trying to do, in fact I've used CSSstickyfooter.com's CSS code, yet it doesn't seem to be working 100% for me.
0
Andy_FangAuthor Commented:
EDIT: I've changed the CSS from
.margin100t {margin-left:100px;margin-right:100px;margin-top:25px;}

Open in new window

to
.margin100t {margin-left:100px;margin-right:100px;}

Open in new window


and this H1 isn't appearing:
    <h1><font size="6px"><b>Use LeakStack to Share and Earn With Files in Seconds.</b></font></h1>

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

GaryCommented:
You need to increase the top margin not remove it
0
RobOwner (Aidellio)Commented:
I would also fix the many errors and warnings you have with your markup: http://validator.w3.org/check?uri=https%3A%2F%2Fleakstack.com%2Fnew%2Fstack&charset=%28detect+automatically%29&doctype=Inline&group=0

There are tags not closed for starters, which can cause site behavioral issues.
0
Andy_FangAuthor Commented:
Hi all, thanks for the comments.

If you go here, the second part has conflict between the image and text, what is the issue here? How do I make it not conflict?
0
GaryCommented:
Are you talking about the Get paid instantly, automatically part?
How should it look?

p.s. the site is very very slow to load.
0
Andy_FangAuthor Commented:
Are you talking about the Get paid instantly, automatically part?

Yes, that's what I'm refering to. I do not want the text to collide with the image like so: http://gyazo.com/63f9e76c1ca3f5df2189e388ebe9f01b
0
GaryCommented:
So how should it look?
Above it, below it or to the right hand side?
Your main problem is that the image is a background image so it will not affect any other content that would normally happen like wrapping.
0
Andy_FangAuthor Commented:
Basically I would like it to be aligned to the right of the image, so as long as the text is comftorable to the eye.

Perhaps there's code that will allow me to align it to the bottom of the image if the user is in a small screen like mobile?
0
GaryCommented:
You need to remove the image as a background and use a proper img tag or apply the background to a div that is separate from the text div so you can get the content to flow together properly
Then you are going to have to write your media queries to alter the widths.
At the moment you need a screen width of over 1100px to get it to fit horizontally correctly.


Something like this maybe

<section class="earnings">
<div class="row">
<div id="left">
<img style="min-width: 320px; width: 60%;" src="/images/earnings.png" class="earn_image">
<div class="col5r t15r margin25">
<h2>Get paid instantly, automatically</h2>
<p>Unlike traditional CPA networks, that pay you monthly, we pay you automatically via PayPal. LeakStack has the lowest withdrawl limits in the industry ($25), so you're guaranteed to profit from every upload! We also automatically <a data-toggle="modal" href="#myModal">credit you bonuses</a> for getting paid more than once in a day.</p><p>
</p></div>
</div>
</div>
</section>

Open in new window

I added width: 35%; to .col5r{}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Andy_FangAuthor Commented:
Worked like a charm!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.