CODEWITHSUNDEEP
htmlcss
chiapa
chiapa

Reputation: 4412

Trouble with HTML/CSS layout

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?

Upvotes: 1

Views: 102

Answers (3)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

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/

Upvotes: 1

Giannis Grivas
Giannis Grivas

Reputation: 3412

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

Upvotes: 0

Danield
Danield

Reputation: 125423

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;
}

Upvotes: 2

Related Questions