-
1. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
SnakEyez02 Jan 16, 2013 8:11 AM (in response to New flash user)1. No. This shouldn't be an issue just place the fixed element outside the fluid grid.
2. Just set the display to none for the element(s) you don't want to show. Setting the visibility to hidden just hides it from sight but leaves it in the flow of the element whereas display none, hides it from sight and takes it out of the flow.
Note: Adobe doesn't care. I agree with you to an extent, but I don't use the video programs so I feel like my money in the Cloud is not being properly allocated if I have to support development of programs I don't need and I can't get the smaller collections in the Cloud, it's all or piece-by-piece which is too expensive. The current version is supported though. They are supporting 2 versions simultaneously which gets confusing because they called changing Menu text an "upgrade". That one will continue to puzzle me.
-
2. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
New flash user Jan 17, 2013 11:29 AM (in response to SnakEyez02)SnakEyez02,
Thanks for the quick response.
-
3. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
New flash user Jan 17, 2013 11:31 AM (in response to New flash user)Set the display to none does not effect it either. It seems the fluid grid wants to resize and shrink the image and not remove it.
-
4. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
Nancy O. Jan 17, 2013 11:41 AM (in response to New flash user)Use media queries to target specific device widths.
@media only screen and (max-width:480px) {
/**special conditions for mobile layout**/
#divName {display:none}
}
Nancy O.
-
5. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
New flash user Jan 17, 2013 12:49 PM (in response to Nancy O.)Adobes fluid grid does its media queries. In the boiler plate file the following can be found
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }my elements name is logo
So in my fluidgrid.css page
Here is one example of the code I have tried.
.hidden #logo {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: none
}
I have tried it as #logo.hidden
I have removed the display:block property.
I seems that no matter how I structure the code the element is still visiable when i preview it in Iexplore?
-
6. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
Nancy O. Jan 17, 2013 12:53 PM (in response to New flash user)Don't concern yourself with boilerplate.css.
display:none = don't display this.
display:block = displayed this.
#logo {
display:none;
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block
}
HTML:
<div id="logo">Your logo goes here</div>
For better answers, you'll need to upload your page & support files to a public web space you control and post the URL.
Nancy O.
-
7. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
New flash user Jan 17, 2013 1:00 PM (in response to Nancy O.)It seems when I delete all lines and just have the CSS
}
#logo {
display:none
}
it removes the item from view when the browser window is down sized to the mobile view. AWESOME. I have spent 5 hours tring to get to get items to go away.
For some reason the other CSS caused it to display
Thanks



