Responsive Website with Fluid Grid Layout

Report · Jan 06, 2017

I am working on building a website. I get the css complete but when i go and change it based on the browser size (nothing happens).

This is what Dreamweaver has in the css and the the div class goes below it.

/* Mobile Layout: 480px and below. */

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */

I dont want the tablet and desktop to inherit anything.

Please Help

Report · Jan 07, 2017

Not sure, what is the question?

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jan 07, 2017

I am not sure how to make each media size have its own characteristics for each div tag.

When i change the table or desktop code, the page still shows up in with mobile css code when i have the browser and tablet.

Report · Jan 07, 2017

Have a look at the following, copy and paste into a new document and view in browser. Resize the browser to see the effects.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
  body {
        background-color: lightgreen;
  }
  img {
  display: block;
  width: 100%;
  height: auto;
  }
@media screen and (min-width: 481px) {
    body {
        background-color: green;
  color: aliceblue;
    }
}
@media screen and (min-width: 769px) {
    body {
        background-color: greenyellow;
  color: brown;
    }
}
</style>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-xs-12">
  <h2>Heading</h2>
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  <img class="img-responsive" src="http://dummyimage.com/1200x400.jpg" alt="my banner" width="1200" height="400">
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  </div>
  </div>
</div>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jan 07, 2017

Ok

Do you suggest putting all the css in the html file or should i create a separate css file and link it? Do i not need any of the other css styling the dreamweaver automatically has in its css style sheet?

I have upload the css file to my server so you can see what i have. http://zutterdesign.com/css/BBAfullCSS.css. I Can upload a page as well if you would like to see it in actuion

Thanks for your help.

Report · Jan 07, 2017

<I am not sure how to make each media size have its own characteristics for each div tag.>

Fluid Grid layouts are not ideal for what you're trying to do then.

FGLayouts are a mobile first layout system so everything inherits styles from the mobile CSS code. That's how it works. You cannot reorder elements with FGLayouts. In other words, Div 1 will always be Div 1 on each device.

I need to mention also that FGLayouts are a legacy feature. And they no longer exist in CC 2017. There's a reason for that. The layouts were very fussy to work with and prone to failure especially if you tried to edit the self generated CSS code. You really must use a separate CSS file for your custom styles. And never, ever tamper with the FGLayout CSS.

If you're not too heavily invested in this project so far, you should probably switch to Bootstrap. It's infinitely better for making responsive web sites with much more to offer in the way of mobile friendly menus, image sliders, forms, panels, etc....

Bootstrap 3 Tutorial

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 07, 2017

I have the whole site built. Im just working on formatting. the different device characteristincs.

Should i build the site as i have it without using fluid grid layout? Basically by this i mean keep all the coding the same but remove all the fluid hid layout connection?

Report · Jan 07, 2017

Show us your site so far.

What's the point of using Fluid Grid Layouts if you throw out the CSS code? I don't understand that.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 07, 2017

Im working on uploading it now.

I was gonna built the site based on how ben showed me above. Basically keep the same code (copy n paste into new file) just have no Fluid grid elements.

Report · Jan 07, 2017

here is where i am at currently: Welcome to Bates Brothers Amusements

Report · Jan 07, 2017

Seriously,, I would start over with Bootstrap.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 07, 2017

Will look into the Bootstrap way. spent a ton of time and late nights to get where i am at and dont want to throw that all away.

Report · Jan 08, 2017

Building a responsive layout first will make your life much easier. As a quick example, this layout will work on all devices from the onset. Simply add your content to the appropriate containers and you're good to go.

Code:

<!doctype html>

<head>

<title>Bootstrap Panels with Modals, Flatly Theme</title>

<style>

body {padding-top: 71px}

.center-block {float:none}

</style>

</head>

<body>

<div class="navbar-header"> <a class="navbar-brand" href="#">Brand or Logo </a>

</button>

</div>

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

</ul>

</div>

</nav>

<h1>Our Awesome Website</h1>

<h2>Some Pithy Slogan</h2>

</div>

</ol>

<h3>Heading 3</h3>

<p>Details....</p>

</div>

<h3>Heading 3</h3>

<p>Details....</p>

</div>

<h3>Heading 3</h3>

<p>Details....</p>

</div>

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

</div>

</div>

<hr>

<div class="panel-heading"><h3 class="text-center">Heading 3</h3></div>

<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! </p>

<button type="button" class="btn btn-sm btn-default center-block" data-toggle="modal" data-target="#myModal1">CLICK FOR DETAILS</button>

</div>

<div class="panel-heading"><h3 class="text-center">Heading 3</h3></div>

<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! </p>

<button type="button" class="btn btn-sm btn-default center-block" data-toggle="modal" data-target="#myModal2">CLICK FOR DETAILS</button>

</div>

<div class="panel-heading"><h3 class="text-center">Heading 3</h3></div>

<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! </p>

<button type="button" class="btn btn-sm btn-default center-block" data-toggle="modal" data-target="#myModal3">CLICK FOR DETAILS</button>

</div>

<div class="panel-heading"><h3 class="text-center">Heading 3</h3></div>

<p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! </p>

<button type="button" class="btn btn-sm btn-default center-block" data-toggle="modal" data-target="#myModal4">CLICK FOR DETAILS</button>

</div>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

</div>

<h3>Twitter Feed Scroller Here</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p>

</div>

</div>

<hr>

<p class="small">Template courtesy of <a href="http://alt-web.com">Alt-Web.com</a><br>

Placeholder images from Dummyimage.com & Lorempixel.com</p>

</footer>

</div>

</div>

<h3 class="pull-left">Heading 3</h3>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, ratione. Vero quod, laudantium labore, sapiente cum totam officiis quasi optio, et harum, ex ipsum vitae quis doloribus possimus tenetur.</p>

</div>

<p class="pull-left">Modal Footer</p>

<button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

</div>

<h3 class="pull-left">Heading 3</h3>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, ratione. Vero quod, laudantium labore, sapiente cum totam officiis quasi optio, et harum, ex ipsum vitae quis doloribus possimus tenetur.</p>

</div>

<p class="pull-left">Modal Footer</p>

<button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

</div>

<h3 class="pull-left">Heading 3</h3>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, ratione. Vero quod, laudantium labore, sapiente cum totam officiis quasi optio, et harum, ex ipsum vitae quis doloribus possimus tenetur.</p>

</div>

<p class="pull-left">Modal Footer</p>

<button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

</div>

<h3 class="pull-left">Heading 3</h3>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, ratione. Vero quod, laudantium labore, sapiente cum totam officiis quasi optio, et harum, ex ipsum vitae quis doloribus possimus tenetur.</p>

</div>

<p class="pull-left">Modal Footer</p>

<button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

</div>

</body>

</html>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Responsive Website with Fluid Grid Layout

1 Correct answer