logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-29-2016, 11:18 PM   #1
old_picker
 
Join Date: Feb 2016
Posts: 5
Default basic DW fluid css question

In the layout.css file that controls the styling of div tags I find 3 instances of each div tag ID.

Is anyone able to explain why each div id appears 3 times?
old_picker is offline   Reply With Quote
Old 02-29-2016, 11:45 PM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

Without seeing it i would guess it is usong media quries so the 3 instances are for use at different screen sizes.
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-01-2016, 12:46 AM   #3
old_picker
 
Join Date: Feb 2016
Posts: 5
Default

Quote:
Originally Posted by edbr View Post
Without seeing it i would guess it is usong media quries so the 3 instances are for use at different screen sizes.
ok thanks that explains it - To flesh this out a little, Desktop and tablet entries have an @media entry but the mobile does not. Could this explain why I am having problems with menus displaying correctly in mobile preview?

here are the css opening tags for each section. Each one is followed by each of div tags styling info which I've omitted.

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

.gridContainer {

second one:
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {

3rd one:
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {.gridContainer {
old_picker is offline   Reply With Quote
Old 03-01-2016, 04:25 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

first one: is for most mobile phones
Code:
/* Mobile Layout: 480px and below. */
@media only screen and (max-width: 481px) {
.gridContainer {
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-01-2016, 05:11 AM   #5
old_picker
 
Join Date: Feb 2016
Posts: 5
Default

i see where it was going wrong - I think - I've inserted your suggested mquery into the css and will test it tomorrow

your two posts on this have cracked this difficult nut right up for me. I am finally beginning to understand how the underlying structure of this css file works.

I have built and maintained simple sites in html 4 using dreamweaver wysiwyg design mode and tables for years but recently found I need to upgrade my current site to css3 and html5 for responsive layout

a big shock to find out I knew virtually nothing beyond some very basic html
thanks for taking the time to throw some pearls my way
old_picker is offline   Reply With Quote
Old 03-02-2016, 01:30 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

Its changing constantly. but its worth the effort generally
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-02-2016, 12:01 PM   #7
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

The reason there is no separate media query for mobile is that it's set up as default. All devices will get the mobile design, until you reach the minimum width requirement for the other media queries. This approach is often called 'Mobile First".
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:51 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com