PDA

View Full Version : basic DW fluid css question


old_picker
02-29-2016, 10:18 PM
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?

edbr
02-29-2016, 10:45 PM
Without seeing it i would guess it is usong media quries so the 3 instances are for use at different screen sizes.

old_picker
02-29-2016, 11:46 PM
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 {

edbr
03-01-2016, 03:25 AM
first one: is for most mobile phones
/* Mobile Layout: 480px and below. */
@media only screen and (max-width: 481px) {
.gridContainer {

old_picker
03-01-2016, 04:11 AM
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

edbr
03-02-2016, 12:30 AM
Its changing constantly. but its worth the effort generally :)

domedia
03-02-2016, 11:01 AM
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".