Home > Default > Media query issues in fluid grid layout (take a look at this code)

Media query issues in fluid grid layout (take a look at this code)

November 30Hits:0
Advertisement
how to make adjustments in specific device views without screwing everything up in other views. I know in the css designer when I click global it makes changes to all views which is great. But when I click one of the little icons at the button of the screen (like the smartphone icon or tabet etc) the changes I make in the view dont stay in that view but affect all views. So I'm coming to understand ( maybe wrongly) that those icon have no design power other than to show you what thing look like in that view. I'm starting to focus on clicking the stlye sheet dreamweaver cc created (not the boilerplate one) clicking the media query for the screen size I want to adjust and finding the selector I want to tweek (ITS RIGHT HERE THE HICKUP I'M HAVING IS AT - i CANT ADJUST  IMAGES THAT I HAVE SPECIFICALLY IN THE CORRESPONDING VIEW WITHOUT SCREWING EVERYTHING EVERYWHERE UP IN THE OTHER VIEWS) Can anybody invision what I'm trying to do and what happening and give me a fix????
Idealy I would like to simply click the view icon of the screen size I want to tweak and drag handle bars to resize images and the adjustment stay only in that sceen size range, but this is not happening. This why I say that those (may wrongly I might be doing something wrong) icons have no design power other than to give you a view of things. But either way whether I can click icons and rag handle handle bars or in I have to use css designer I cant specifically work in one view without affecting all the others.
Below is css code for media queries that are in my style sheet. It might not be the cleanest bit I want you to focus on two main aspsects of the code
     1) The media queries, particularly the smartphone 480 and below. ( but all media queries if need be)
     2) In the header and in the list iteams I have images. Its these images that I'm trying to resize - but only specific changes in specific views
Take a look:
/* Mobile Layout: 480px and below. */
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          clear: none;
          float: none;
#div1 {
#mainheader {
          margin-left: 0;
          position: static;
          height: auto;
          width: 100%;
#navbarone {
#navbartwo {
#listiteams {
          color: #FFFFFF;
          text-align: center;
          background-color: #9DC5D3;
#listiteamstwo {
          text-align: center;
          background-color: #9DC5D3;
          color: #FFFFFF;
#navbutton {
width: 100%;
#li1 {
width: 100%;
clear: both;
margin-left: 0;
#li2 {
width: 100%;
clear: both;
margin-left: 0;
#navbuttontwo {
width: 100%;
#li3 {
width: 100%;
clear: both;
margin-left: 0;
#li4 {
          width: 100%;
          clear: both;
          margin-left: 0;
#flads {
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          clear: none;
          float: none;
          margin-left: auto;
#div1 {
#mainheader {
          position: static;
          height: auto;
          width: 100%;
          margin-left: 0;
#navbarone {
#navbartwo {
#listiteams {
#listiteamstwo {
#navbutton {
width: 32.2033%;
#li1 {
width: 32.2033%;
clear: none;
margin-left: 0;
#li2 {
width: 32.2033%;
clear: none;
margin-left: 0;
#navbuttontwo {
width: 32.2033%;
#li3 {
width: 32.2033%;
clear: none;
margin-left: 0;
#li4 {
width: 32.2033%;
clear: none;
margin-left: 0;
#flads {
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
          width: 100%;
          max-width: 2000px;
          padding-left: 0;
          padding-right: 0;
          margin: auto;
          clear: none;
          float: none;
          margin-left: auto;
#div1 {
#mainheader {
          position: static;
          height: auto;
          width: 100%;
          margin-left: 0;
#navbarone {
#navbartwo {
#listiteams {
#listiteamstwo {
#navbutton {
width: 32.7731%;
#li1 {
width: 32.7731%;
margin-left: 0;
clear: none;
#li2 {
width: 32.7731%;
margin-left: 0;
clear: none;
#navbuttontwo {
width: 32.7731%;
#li3 {
width: 32.7731%;
margin-left: 0;
clear: none;
#li4 {
width: 32.7731%;
margin-left: 0;
clear: none;
#flags {
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;

Answers

By default, image height and width are 100% in FluidGrid Layouts.  You'll find it near the top of your CSS code.
@charset "utf-8";
img, object, embed, video {
max-width: 100%;
.ie6 img {
width:100%;
That's so they can re-scale to fit the various layouts.  If you need to assign explicit height & width values to certain elements, you can override that CSS rule by using the height & width attributes in your HTML code like this. 
<img src="some_image.jpg" height="xxx"  width="xxx">
Or, you can give your image a class name and target that class with CSS Media Queries.  For an example, copy & paste this code into a new, blank document.  SaveAs test.hml and preview in browsers at different screen widths.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/**FLUID GRID DEFAULT**/
img, object, embed, video{
max-width: 100%;
.ie6 img {
width:100%;
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
.nav {width:320px; height:74px; }
/* Special Rules for Tablets */
@media only screen and (min-width: 482px) and (max-width: 1024px) {
.nav {width: 480px; height: 148px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 1025px) and (max-width: 1230px) {
.nav {width: 1000px; height: 225px;}
</style>
</head>
<body>
<h3>This image naturally rescales to layout</h3>
<img src="http://placehold.it/1000x225" alt="some description">
<h3>This image has a .nav class &amp; rescales to set media query break points.</h3>
<img class="nav" src="http://placehold.it/1000x225" alt="some description">
</body>
</html>
Does this make sense now?
Nancy O.

Read other 5 answers

Tags:

Related Articles

  • Media query issues in fluid grid layout (take a look at this code)November 30

    how to make adjustments in specific device views without screwing everything up in other views. I know in the css designer when I click global it makes changes to all views which is great. But when I click one of the little icons at the button of the

  • Media query issuesNovember 30

    Hi, After following all procedures of setting up the pages, the folders, etc. I want to INSERT or MODIFY the only one Media Query which is inside a CSS file. I use the one of almost default settings. I just have changed in the phone layout, 6 columns

  • How to convert live website to fluid grid layoutNovember 30

    I have an existing live website. How do I convert it to a fluid grid layout?Who is Peter? Responsive Web Design http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ Introduction to CSS Media Queries http://www.adobe.com

  • DW6 fluid grid layout issue: writes to page instead of css fileOctober 11

    Using DW6 (version 12, owned, build 5861) on Windows 7 64 bit. Following tutorials and the help files to use the fluid grid layout. Start a blank page on a new site, which inserts the starter div and new css file Immediately save page, which also gen

  • Fluid Grid Layout - IE Issue with Image SizeNovember 30

    Hi, I've been working on a new website using the CS6 Fluid Grid Layout. My site is working correctly in Chrome and Firefox but in Internet Explorer 9 and 10, and most likely all other versions, the images that resize normall in Chrome and Firefox sta

  • Fluid Grid Layout Alignment IssueOctober 11

    I'm using Dreamweaver CC Fluid Grid Layout. This is my first time using Dreamweaver, (and first time posting to Adobe Community) so I don't have a ton of experience. Somehow, the whole body of all my pages has been aligned left and I can't find anywh

  • Fluid grid layout issuesOctober 11

    trying my hand at thsi fluid grid layout thing and am having a few issues. part of the problem is i may just be trying to do too much, making an ecommerce site and the page has quite a few div's in it, a header, description, picture, cart, and price

  • Fluid Grid Layout issueNovember 30

    i created a Fluid Grid Layout the other day.  Published it via FTP and it worked fine.   Today I made some changes to the page and they look fine on dreamweaver.   When I save and publish,  none of the changes show up on the site.   Are there other f

  • CS6, Fluid Grid Layouts, and Spry Menu - sizing issuesNovember 30

    Hi. I am a full-fledged nubie to Dreamweaver, so please forgive my ignorance. But I really need to build a new site, and I really like DW so far (much better than what I was using). I am building a site with fluid grid layouts so it is properly sized

  • Cs6 fluid grid layout wide-screen resolution issueNovember 30

    Hi all, I've done some poking around but have not found anything that answers this question - if I missed something please pass me the link! So I'm doing a new site in cs6 with fluid grid layouts. It's fine in terms of screen sizes, that is, small me

Copyright (C) 2019 wisumpire.com, All Rights Reserved. webmaster#wisumpire.com 14 q. 0.570 s.