responsive design in html

I am trying to do a design a webpage. The layers are not working correctly. The text layer is not responsive to the adjustment of the screen. So the background image works perfect where as the text remains at the same place.
Any resolution will be appreciated.
http://carnalinc.com/about.php

how to correct it. Please advice.
karthik80cAsked:
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.

rgranlundCommented:
There will be someone that will come along and answer this question better than me, but in the mean time, here are my observations.  The content of your page should be within a containing div and it should be defined in you CSS.  Then place the about us info in its own div and define in the css.  After that you can remove the margin definition from the div #scroll.

If you are interested in changing the size of the font as you re-size, place a few media queries within your css at break points where you want the font size to decrease or increase.

I hope that helps some.
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
Marco GasiFreelancerCommented:
Generally i agree with rgranlund.  But if you want develop a reaponsive website I strongly suggest to use a responsive framework as Bootstrap (www.getbootstrap.com). It will provide you a solid responsive environmsnt and it will avoid you wasring your time reinventing the wheel
0
Slick812Commented:
Greetings  karthik80c, , looked at your page, and it's source code, I resized it in firefox on laptop, and it was very very very BAD for responsive, you have an Image, that is your page "background" that does resize, , BUT, there is no way to ever have a responsive page using that Image as your page base. as you have a dark grey rectangular area, for the "about" text and the "people" images and descriptions (like rocky), and this AREA (just the grey rectangle), Absolutely MUST resize independent of your background, with Height and Width required by its content.

You some how think that using the position:absolute for most everything,  is good for this page, BUT you use it way to much, in places that it Can Not Be used for what you need, responsive.

You need to abandon every element of this page and start again, with a whole new setup, I find it best to start page design with a cell phone view, a Single Column small image page layout, with some of the NEW touch icon roll out <div> for menu display and information display, that will not fit on a cell phone view.
And once I get a great cell phone view, I do changes for a Tablet view,  and Last I do responsive, work to get a laptop view.
0
Ray PaseurCommented:
+1 for Marco's suggestion of Twitter Bootstrap.  It's the right tool to use.  Learn it, embrace it, and you'll never go back!
0
karthik80cAuthor Commented:
I am trying to use the bootstrap. I will post soon. Thank you for your responses.
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
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.