Hi All.
Any ideas why this fails.. Div Containers as inline blocks centered. Flows to a stack when the browser is reduced which is what is wanted. Works in Dreamweaver and preview but when uploaded to web the divs center stacked. Center is what is wanted but not stacked. Want them to flow with the browsers.
When the orginal website was created and images are added it works to the old pages. But with current Dreamweaver it fails? Any ideas?
Help is appreciated!
16
Replies
Hi, osgood. I have tried the Flex box..no luck
By @h2obeek
Might the following help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>GRID/FLEX</title>
<style>
* {
box-sizing: border-box;
}
/* GRID EXAMPLE */
.responsive-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr) ;
width: 75%;
max-width: 1200px;
margin: 0 auto 30px auto;
}
/* Media 768px */
@media screen and (max-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr) ;
width: 85%;
}
}
/* Media 480px */
@media screen and (max-width: 480px) {
.responsive-grid {
grid-template-columns: 1fr ;
width: 95%;
}
}
.box {
display: grid;
place-items: center;
background-color: tomato;
color: #fff;
padding: 20px;
font-size: 30px;
}
/* FLEXBOX EXAMPLE */
.responsive-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 75%;
max-width: 1200px;
margin: 0 auto;
}
/* Media 768px */
@media screen and (max-width: 768px) {
.responsive-flex {
width: 85%;
}
}
/* Media 480px */
@media screen and (max-width: 480px) {
.responsive-flex {
width: 95%;
}
}
.responsive-flex .box {
display: grid;
place-items: center;
flex-basis: 32.5%;
background-color: purple;
color: #fff;
padding: 20px;
font-size: 30px;
}
/* Media 768px */
@media screen and (max-width: 768px) {
.responsive-flex .box {
flex-basis: 49%;
margin: 0 0 10px 0;
}
}
/* Media 480px */
@media screen and (max-width: 480px) {
.responsive-flex .box {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<!-- GRID -->
<div class="responsive-grid">
<div class="box">Grid</div>
<div class="box">Grid</div>
<div class="box">Grid</div>
</div>
<!-- FLEX -->
<div class="responsive-flex">
<div class="box">Flex</div>
<div class="box">Flex</div>
<div class="box">Flex</div>
</div>
</body>
</html>
https://waterbeekannette.com/watercolor.htm
By @h2obeek
What browser are you using as the page looks to be doing what you require in Chrome and Safari or is this the old website.......hmmm?
The code you posted in the forum looks very different, so I'm a bit confused.
This what I see at normal Zoom settings on a 1680px wide display.
On smaller displays, columns reduce & and then stack vertically as expected.
That said, you have an extraordinary number of code validation errors & warnings that need attention. 235 code errors will adversely impact your layout on some devices. Fix these first.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwaterbeekannette.com%2Fwatercolor.htm
This what I see at normal Zoom settings on a 1680px wide display.
By @Nancy OShea
That's kind of what I'm seeing as well so I really dont know why the OP is seeing all the boxes as being stacked in their browser, that's IF we are looking at the same code, which I doubt, as I only see 3 products in the original post by the OP.
Anyway if what is required is the functionality in the url posted its best and easily accomplished with grid.
Plus its baffling because the OP says the original website was produced 20 years back, well the code at the url posted doesnt look quite that old...........so I'm confused.
I'm out now so I'll leave it in your capable hands to sort out. If the OP wants to go down the grid route based on the functionality at the url posted then I can provide some code for that....its pretty simple to keep the fixed width image and allow the images to fill up the browser space or wrap if there is not enough space.
As an aside note. Has the rogue 'upvote' bot returned? I'm seeing a lot of crazy 'upvoting' going on recently which makes no sense.
As an aside note. Has the rogue 'upvote' bot returned? I'm seeing a lot of crazy 'upvoting' going on recently which makes no sense.
By @osgood_
=========
Sadly, the bot problem persists and never fully went away. The relevant team will likely delve deeper into the weeds after New Years.
The code I pasted is from the new dreamweaver page.
By @h2obeek
So why dont you share the complete code, html and css, with us by uploading it into a seperate folder where the current website exists?
That way we would be able to see what is going on with your new code, layout. Showing us the old website and the functionality you are trying to achieve is great but we need to see the new code to provide any useful help, possible solutions.
AdChoices