2 Correct answers
Usually that means you have an error in the code that is causing DW to display something other than what you expect
Run the validation tool under Window > Results > Validation or go to http://validator.w3.org/nu to get a listing of any errors in your code. Fix anything that's structurally wrong with what you have and it should start working.
If you have clean and valid code, please share it here (copy/paste) and describe the exact process you are using to add new css. Be sure to include the versi
Without seeing your code, it's impossible to guess what may be going on.
1. Copy & paste the following code into a new, blank document and save to your local site folder as test.html.
This document contains embedded CSS styles and an inline style on the Column 2 <div>.
2. Attempt to change any or all of the CSS values.
3. Save document (Ctrl/Cmd+S) and refresh screen (F5).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Columns</title>
<meta http-
3
Replies
Without seeing your code, it's impossible to guess what may be going on.
1. Copy & paste the following code into a new, blank document and save to your local site folder as test.html.
This document contains embedded CSS styles and an inline style on the Column 2 <div>.
2. Attempt to change any or all of the CSS values.
3. Save document (Ctrl/Cmd+S) and refresh screen (F5).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Columns</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background:antiquewhite;
color:brown;
text-align: center;
}
nav {
background-color:tan;
padding:2%;
border-top:1px solid brown;
}
nav a {color:purple;}
/* Mobile first*/
.flexbox-container {
display: flex;
flex-direction: column;
}
/* Tablets, Desktops*/
@media only screen and (min-width: 630px) {
.flexbox-container {
flex-direction: row;
justify-content: space-evenly;
}
}
/* All devices */
.flexbox-container > div {
flex-grow: 1;
padding: 5%;
background-color:brown;
color:antiquewhite;
}
img {
max-width: 100%;
height: auto;
display: block;
vertical-align: baseline;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
<h1>XYZ Website</h1>
<h2>Lorem ipsum dolor</h2>
</header>
<nav><a href="#">Navigation Link</a></nav>
<main class="flexbox-container">
<div>
<h3>Column 1</h3>
<img src="https://dummyimage.com/300x227" alt="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id in commodi dicta fuga sit, consequuntur.</p>
</div>
<div style="background-color:navajowhite; color:brown">
<h3>Column 2</h3>
<img src="https://dummyimage.com/300x227" alt="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id in commodi dicta fuga sit, consequuntur.</p>
</div>
<div>
<h3>Column 3</h3>
<img src="https://dummyimage.com/300x227" alt="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id in commodi dicta fuga sit, consequuntur.</p>
</div>
</main><!--/flex-container-->
<footer> <small>© 2020 XYZ Website all rights reserved.</small>
</footer>
</body>
</html>
Do you see your style changes?
AdChoices