Responsive design

  • benmandv

    (@benmandv)


    12 years, 4 months ago

    Hi there
    At the moment, I have my site set so the elements change relative to the browser window size, but I’d like to utilise the @media screen function to stop the whole site resizing if a window is smaller than 940px. I’ve had a mess about but I can’t seem to get the desired effect. My knowledge of css is rather basic. Any help would be appreciated.

    This is how my site is set out at the moment:

    #wrapper {
	margin: 0 auto;
	padding-bottom: 60px;
	text-align: left;
	max-width: 100%;
}
#header {
	DISPLAY: none;
	margin: 10px auto 15px;
	min-height: 73px;
	padding: 35px 0 77px;
	position: relative;
	text-align: center;
}
#navigation {
	background: #f1f1f1; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#fafafa, #f1f1f1);
	background: -o-linear-gradient(#fafafa, #f1f1f1);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#f1f1f1)); /* older webkit syntax */
	background: -webkit-linear-gradient(#fafafa, #f1f1f1);
	border-top: 1px solid #fff;
	left: 0;
	min-height: 29px;
	padding-top: 12px;
	top: 0;
	width: 100%;
	z-index: 999;

}
#navigation-frill {
	background: url(images/nav.png) 0 0 repeat-x;
	height: 9px;
	max-width: 100%;
}
#content {
	margin:  4.6em auto;
	max-width: 85%%;
}
#posts-wrapper {
	width: 73%;
	float: left;
}
#secondary,
#tertiary {
	background: #f1f1f1;
	float: right;
	max-width: 24%;
}
.wrapper {
	margin: 0 auto;
	max-width: 100%;
}

    Cheers

Viewing 2 replies - 1 through 2 (of 2 total)
  • Sleneau

    (@sleneau)

    12 years, 4 months ago

    This should help you out. An example of media queries would be as follows. Remember that you will want a copy of all the elements you want to change in size when copied into every media query:

    <!--Browser-Window is less than 600px wide-->
@media (max-width: 600px) {
style1 {}
style2 {}
style3 {}
}

<!--Browser-Window is less than 960px wide, but wider than 600px-->
@media (min-width: 600px) AND (max-width: 960px) {
style1 {}
style2 {}
style3 {}
}

<!--Browser-Window is less than 1200px wide, but wider than 960px-->
@media (min-width: 961px) AND (max-width: 1200px) {
style1 {}
style2 {}
style3 {}
}

    Notice how you have a copy of the same styles under every section. This tells the browser that your website is supposed to look different based on the width of the screen. Do read the article I linked to, though. It shows you everything media queries can do, and it’s a very good thing to know.

    C W (VYSO)

    (@cyril-washbrook)

    12 years, 4 months ago

    CSS rules don’t tell us much unless you supply the HTML markup. However, if I’ve understood your question correctly, then media queries should not be necessary to achieve the specific behaviour that you have described.

    For instance, if <div id="wrapper"></div> is the overall container element for all modules, then you would set up the width attributes as follows:

    #wrapper {
	width: 100%;
	min-width: 940px;
}

    With those declarations, the #wrapper layer will take up 100% of the viewport width but will not resize below 940px.

    By the way, if I can point something else out: z-index, left and top do nothing unless they are applied to a positioned element. Since #navigation is not positioned, those properties are redundant.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Responsive design’ is closed to new replies.