responsive design.. What size?

0 jamie y · September 8, 2015
I am working with Dreamweaver cs6. I am just getting starting with it's new responsive design features. I have a fully designed psd that I want to code into my first responsive design. I started setting up my site and chose to use Dreamweavers bootstrap function for the responsive part of the site. When setting it up, it asks for the small, medium and large sizes. Well, the PSD is set up on a 12 grid system that is 940px wide. So I figured that would be the large size.

My problem is that I don't know what to set as the small and medium size. Is there a formula to figure this out or an industry standard?

Post a Reply

Replies

Oldest  Newest  Rating
0 rajeev man dongol · September 8, 2015
for small devices  use col-sm-0 to col-sm-12 , for large devices use col-lg-0 to col-lg-12,for medium devices use col-md-0 to col-md-12 , col-xs-0 to col-xs-12 for extra small devices .
0 rajeev man dongol · September 8, 2015
you can use container class for setting the content in the center of the page or you can use container-fluid class to take 100% of the page that behaves according to the width/height of the browser .
0 jamie y · September 8, 2015
I am looking to find the sizes to set. Not the setting for the rows and columns but the settings for the entire site. The large size is 940px, what should I set the medium and small sizes to in pixels?
0 rajeev man dongol · September 8, 2015
there is no need of it. bootstrap does it for you
0 rajeev man dongol · September 8, 2015
just set the col- class to any element or tag
0 rajeev man dongol · September 8, 2015
and use container class for setting the page to the center and container-fluid class for behaving responsive according to width of the browser.
0 jamie y · September 8, 2015
I don't believe what you are saying is true. If I leave it alone then the site width would be somewhere around 1100px. the design for the site is only supposed to be 940px. Which means I need to set the large, medium and small sizes so that bootstrap can then work off those dimensions.
0 rajeev man dongol · September 9, 2015
there is no need of defining custom width in bootstrap for layout . use medium or large . for 940px medium would be better . 
0 Brotsky Tv · September 9, 2015
hey there !



Check out this links to get the solution:

1) https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
2) https://css-tricks.com/snippets/css/media-queries-for-standard-devices/



For more HTML/ CSS tutorials :  https://www.brotsky.tv/2014/02/25/how-to-make-elements-responsive-in-csshtml/
0 Craig Charlton · September 13, 2015
your question is about when to apply media queries right????

why not just add a media query when your site needs it??? if it needs one at 1100px and another at 800 and another at 700 then why not????

you are designing a site to look good regardless of size.... christmas is coming and maybe apple are going to bring out  a whole new range with many viewing sizes.... your site will be good on any....

don't over think it.... use chrome tools and if it looks wrong add a media query..... the trick is actually learning how to adjust so that your media queries and presentation reach the correct balance.... (I.E you dont want to be adding a media query every 20 pixels)...

if your site is made and you are just looking to add media queries open it up in chrome with the console open and use the toggle device mode to get your measurements.... I use dreamweaver but dont know that part of it as I just work my own out in chrome.... but I expect you can adjust them later...
  • 1

HTML / CSS / Web Design

107,095 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators