• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

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
0
adra750
Asked:
adra750
  • 6
  • 5
1 Solution
 
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
 
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

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

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now