Hey there! Currently I am utilizing the fluid layout grid system for responsive web design.
I really appreciate being able to adjust the size of elements based on screen resolution using media queries, but I have a specific request.
My goal is to ensure that regardless of screen size, the width remains at 960px. I want users with smaller screens, like an iPhone, to see the scaled-down version, while those with larger resolutions will still view content at 960px to prevent the header h1 from scrolling.
Any advice or guidance would be immensely helpful,
Thank you!
Here is the CSS I currently have:
@media only screen and (min-width: 769px){
.gridContainer {
width: 89.0217%;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: 0 auto;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header h1 {
text-align:right;
}
#top_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#bottom_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#featured_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}