Problem with html and CSS

Hello,
I was trying to create layouts using Dreamweaver cs6, somehow my layouts do not function the way I wanted in term of responsiveness o desktop and also on ipad, my "rightsection" disapeared on ipad, also the "rightsection" (purple color) collapse with "mainbox" (greencolor) when you move the browser from right to left on desktop. This doesn't happen when you move the browser from left to right.

I really need your help about this.

I attached all files.
boilerplate.css
home.html
respond.min.js
styles.css
adra750Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Edwin HofferTechnical ExpertCommented:
Hello adra750,

I have updated your style.css file and did some change. Check the file, if you still need any changes, let me know.

Best Regards.
Edwin
styles.css
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
adra750Author Commented:
That is excellent Mr Edwin, can you tell me where i made the mistake and what I should have done? any advice
0
adra750Author Commented:
I noticed 1 thing, when you move the browser to the left or the right to its maximum, text of rightsection and leftsection collapse with mainbox or appear out of it's colored space.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Edwin HofferTechnical ExpertCommented:
Hello Adra,

You defined everything in "px", if you want to make your site responsive use "%" sign instaed of "px".

Can you please share the screenshot of which you are talking about?

Best Regards
0
adra750Author Commented:
thank you for the information

I attached a screenshot
Screen-Shot-2015-04-22-at-6.59.29-PM.jpg
0
Edwin HofferTechnical ExpertCommented:
Hello Adra,

Instead of making a new template you can start with bootstrap template, you can get some examples here: http://getbootstrap.com/getting-started/#examples

In bootstrap the left, right  & center <div> will automatically adjust their height, width and font according to the screen.

Best Regards
0
adra750Author Commented:
any advice to fix it? can you help please

Even bootstrap have a problem with this, please See the attached screenshot.
0
adra750Author Commented:
0
Edwin HofferTechnical ExpertCommented:
If the word is too big then the problem will be the same, but don't worry there is no word like yours that is too big.
0
adra750Author Commented:
But in case i have, because I won't let that text, i'll change font, put an icon etc...

anyway to fix it in your opinion?
0
Edwin HofferTechnical ExpertCommented:
Make it in a image and use class="img responsive" in image tag, then the image will adjust by its width.
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.