Link to home
Start Free TrialLog in
Avatar of AXISHK
AXISHK

asked on

Flex container in CSS

Add a "flex-conainter" css to existing page such that the menu item and photos can be arranged vertically one by one on a small screen (mobile). However, it doesn't work.

Any idea ?

Thx
C--wamp-www-css-style.css
C--wamp-www-index.php
C--wamp-www-topmenu.php
Avatar of David S.
David S.
Flag of United States of America image

The <html> start tag is missing. In its place is <div class="flex-container"> which should come after the <body> start tag, probably after the table.

Also multiple elements cannot share the same ID. You should use a class instead. (So each "#crossfade" becomes ".crossfade" in your stylesheet.)
Avatar of AXISHK
AXISHK

ASKER

That was just to fix the HTML errors, which is the first step. Yu forgot to add the <html> start tag.

".nav" has "width:600px" which will cause a problem. I suggest giving it "width:100%" and "max-width:600px" instead.

Also <span> elements are inline by default, so the width and height properties do not apply to them. To address that give "display:inline-block" to ".crossfade".
Avatar of AXISHK

ASKER

In .nav, what's the meaning of "width:100%" and "max-width:600px"

In  ".crossfade", what does it mean "display"inline-block" ?

It fix when changing the code as you mention. However, the photo doesn't align properly in full screen mode.

In addition, "Home & Furniture" button overlay with lower "Books" button. Can we fix it ?

Thx again.
C--Users-simonleung-Desktop-Problem1.png
C--Users-simonleung-Desktop-Problem2.png
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of AXISHK

ASKER

Thx
Avatar of AXISHK

ASKER

One more check, "element's parent may grow wider than 600px but that element won't".

Does it mean elements inside "nav" will not exceed 600px ?

For "nav" parent, are you talking about <div class="container"> and <div class="flex-container"> ?

Thx again.
You're welcome.

There are several things that can cause an element to be wider than its parent. However, as your code is now, "elements inside '.nav' will not exceed 600px."

The parent of ".nav" is the <nav> element and, in turn, its parent is <div class="container">. Be careful not to confuse ".nav" and "nav".

The developer tools built into desktop browsers these days are great for examining the DOM structure of your pages.