Den 21.05.2015 05:31, skrev Erik Visser:
Hi all,
Thanks so for help and tips on making a site responsive.
This is the site i have to make a responsive version for:
http://www.utrechtsyogacentrum.nl
Hi Erik,
You do not have to make your page responsive on wide screens, in order
to make it fit narrow screens. I suggest you manipulate the original
design through a series of mediaqueries, to make it work on narrower
screens.
That is: a "mobile last" approach that may be easier to implement in
cases like yours.
If you add the following CSS at the very bottom of your existing
stylesheet for the _original_ site-version, you should get a pretty good
idea of how to make your site more responsive and mobile-friendly.
@media screen and (max-width: 980px) and (min-width: 801px) {
#banner{width:98%; height:auto;}
#content_wrapper{width:100%;}
#content_left{width:20%;}
#content_midd{width:67%;}
#content_right{width:100%;}
img#logo {top: 0; left: 0}
}
@media screen and (max-width: 801px) and (min-width: 300px) {
#banner{width:98%; height:auto;}
#content_wrapper{width:100%;}
#content_left{width:95%;}
#content_midd{width:80%;}
#content_right{width:100%;}
img#logo {top: 0; left: 0}
}
I have only manipulated some of the basic elements, and none of the
break-points or values I have used are anywhere near being perfect or
final. You may also want to add one or two more mediaqueries, to create
finer steps down towards the smallest screens.
regards
Georg
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
