Display content specific to browser width

Question

User1445074224 posted

Hi.

I'm new to jQuery but have a task I need to perform quickly. I'd appreciate any "pointers" at where I can go to quickly learn how to do the following.

Take a look at this website (https://www.groove3.com/).

If you start with the browser window maxed you get one lot of content (just take the Login, Cart and Play buttons as an example. If you reduce the width, it's not just a case of the content wrapping, it actually becomes something else.

How is this done?

Cheers

Answer 1

User-474980206 posted

they used a techique called responsive design. you can use css media queries to control the layout.  

   https://en.wikipedia.org/wiki/Responsive_web_design

in your example they rolled their own, but there are popular frameworks like bootstrap, foundation, etc:

   http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

Answer 2

User61956409 posted

Hi banksidepoet,

Take a look at this website (https://www.groove3.com/).

As bruce said, “responsive web design” are used to design this web site.

If you start with the browser window maxed you get one lot of content (just take the Login, Cart and Play buttons as an example. If you reduce the width, it's not just a case of the content wrapping, it actually becomes something else.

It will be easy to implement a collapsible navigation bar using Bootstrap.

http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp

Best Regards,

Fei Han