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
Any idea ?
Thx
C--wamp-www-css-style.css
C--wamp-www-index.php
C--wamp-www-topmenu.php
ASKER
Try again but it still doesn't work....
C--wamp-www-css-style.css
C--wamp-www-index.php
C--wamp-www-topmenu.php
C--wamp-www-css-style.css
C--wamp-www-index.php
C--wamp-www-topmenu.php
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".
".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".
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thx
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.
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.
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.
Also multiple elements cannot share the same ID. You should use a class instead. (So each "#crossfade" becomes ".crossfade" in your stylesheet.)