During the development of a responsive website in Dreamweaver CS6 using the Fluid Grid system, all breakpoints were initially functioning correctly. The site had distinct layouts for desktop, tablet, and mobile devices, each with different resolutions that caused the Fluid Grid Layout Div Tags to rearrange into various columns on the page. Each div was styled with width: __%; in the CSS to ensure they adjusted based on the browser size.
Although everything on the page is responsive and working as expected, there seems to be an issue with the Tablet breakpoint. Instead of transitioning to the Tablet layout at 768px, the site jumps directly to the mobile formatting meant for 480px.
In Dreamweaver's Design mode, the correct Tablet layout can be seen with the right distribution of DIVs and content; however, switching to Live mode or previewing in a browser results in losing the Tablet functionality, leaving only Desktop and Mobile views.
I am considering sharing the CSS code for the @media queries and relevant .gridContainer code to seek potential solutions without overwhelming the reader with extensive CSS code. Should more code be necessary for troubleshooting purposes, I am willing to provide snippets showcasing responsive values for individual DIVs across multiple layouts.
Your assistance and advice are greatly appreciated!
CSS:
/* Mobile Layout: 480px and below. */
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
border:1px solid #00133e;
background: #004aa1;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}