Trouble with HTML/CSS layout

Question

I've got a main page with a menu that works fine on full screen. But when it's on smaller screens, the display is messed up.

Here's the Fiddle of the current situation. If you change the canvas size you can see how the elements behave.

For example, I've tried to insert percentual values but it doesn't work: I've tried to edit the #top-section like this:

#top-section {
    border: 2px solid gray;
    border-radius: 2px;
    width: 95.75%; height: 20%;
    margin: auto;
    background-color: White;
    box-sizing: border-box;
}

But it is not behaving as I wanted. I started with the top section but I want the .breadcrumbs and the .main-window to display nicely if the screen is smaller but I'm having lots of trouble.

Any help?

try to narrow this down to where you think the issue is coming from, having to go through the entire code is not helping a lot... — benomatis
– benomatis, Commented Sep 9, 2014 at 11:42
you could use CSS3 @media queries - jsfiddle.net/7dgac3j5/2 — Anonymous
– Anonymous, Commented Sep 9, 2014 at 11:43
one solution could be to set a min-width for the main content box. that would mean that things wouldn't get crushed, but on small screen there would be a horizontal scroll. i'm not posting as an answer because this may not be an acceptable tradeoff for you. — Woodrow Barlow
– Woodrow Barlow, Commented Sep 9, 2014 at 11:45
@webeno, here's an updated fiddle with less CSS. Also updated in the question — chiapa
– chiapa, Commented Sep 9, 2014 at 11:51
@WoodrowBarlow, the menu buttons being crushed is a part of the problem and your suggestion could actually fix that, thanks :) — chiapa
– chiapa, Commented Sep 9, 2014 at 11:53

Danield · Accepted Answer · 2014-09-09 11:56:33Z

2

Instead of setting a fixed value of 70px for your font-size, consider using the new css viewport units.

Something like font-size: 7vw; (= 7% of the viewport width)

UPDATED FIDDLE (Resize the window to see this in action)

.menu-text {
    font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
    color: white;
    font-size: 7vw; /* <-- here */
    text-shadow: 1px 0px 1px rgba(255,255,255,0.9);
    line-height: 120px;
    position: absolute;
    width: 100%; height: 50%;
    text-align: center;
    transition: all 200ms linear;
}

answered Sep 9, 2014 at 11:56

Danield

127k37 gold badges235 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chiapa Over a year ago

Thanks a lot, +1 I didn't know that. That fixes the font issue. Still, the other problems remain

Hidden Hobbes · Accepted Answer · 2014-09-09 14:18:31Z

1

You mention the .breadcrumbs section disappearing and the .main-window container adjusting with the screen size. To fix this you need to stop using position: absolute; on these divs (which takes elements out of the document flow) and instead allow the divs to stack in the normal document flow.

JS Fiddle: http://jsfiddle.net/6g2hdzqk/1/

EDIT

The issue with the OCW button is due to the buttons being floated and the outer-height of the button changing when hovered (due to the change in border-width) causing the BRG button to nudge up against the TLM button.

Made a few further changes (changed the buttons to be inline-block instead of floated to the left) and incorporated the font suggestion by @Danield (+1d) which seems to fix most display problems.

JS Fiddle: http://jsfiddle.net/6g2hdzqk/2/

edited Sep 9, 2014 at 14:18

answered Sep 9, 2014 at 12:16

Hidden Hobbes

14.2k3 gold badges42 silver badges65 bronze badges

4 Comments

chiapa Over a year ago

There's a behaviour issue when you hover over the OCW button, did you sse it?

chiapa Over a year ago

Sorry, did you alter any markup? Because I'm using your CSS but it isn't looking very nice! I was wondering if you altered the HTML

Hidden Hobbes Over a year ago

Two changes to the markup, <section class="content-wrapper clear-fix"> was removed as it was no longer needed and the clear-fix class was added to <div class="main-window">.

chiapa Over a year ago

Thanks a lot, your answer guided me to the result I needed. +1

Giannis Grivas · Accepted Answer · 2014-09-09 12:03:16Z

0

You have to define width with non-percent value (95%), for example 800px at .main-window class.

answered Sep 9, 2014 at 12:03

Giannis Grivas

3,4242 gold badges22 silver badges40 bronze badges

2 Comments

chiapa Over a year ago

That will fixed width that won't display correctly on smaller screens

Giannis Grivas Over a year ago

Yes but if is smaller screen then the big letters will be hidden.If you have not problem with that you can play with overflow.

Collectives™ on Stack Overflow

Trouble with HTML/CSS layout

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related