How to achieve “responsiveness” of this template?

Tags: jquery,html5,css3,web-applications,responsive-design

Problem :

I'm looking at this template:

I'll have tiles on my site similar to this, however I'm not sure how to get started with moving the tiles according to the size of the window. I'm currently using MeanMenu ( which is awesome for the menu items, but I don't know how to handle the body. Super new to HTML/CSS/JQuery - any pointers would be awesome.

Solution :


Twitter Bootstrap may be what you're looking for.

Bootstrap handles responsive UI quite nicely.

The Fluid Grid System doc has more info and examples, but here's the overview:

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices. - via the Bootstrap Docs

UI / Navigation Bar

In addition to responsive design, Bootstrap comes with a bunch of common ui elements/plugins. Like MeanMenu (which admittedly, I lack any knowledge about), Bootstrap does navigation bars.

Plunker, collaborative online editing.

Lastly, since you're just starting out, Plunker is a great tool for prototyping, and boilerplates. It's especially helpful for sharing code questions/answers with the SO community.

I put together a Plunk > that includes Bootstrap and an example of a responsive image grid and navigation bars.

Hope that helps. Good luck!

    CSS Howto..

    How to stretch items in menu (from right to left) - HTML and CSS

    Why does the Jcrop-tracker not show it's correct position?

    How do I remove the blue border when I click on a hotspot mapped to my image in HTML/CSS?

    How do I modify a css element with Jquery after appended with Jquery to a div?

    Rails How to include a scss file in a specific erb view? [duplicate]

    How to set align of elements to center with css?

    how to create an anchor point

    How do I tell a page to ignore internal CSS in favor of external CSS?

    How to do Hanging Punctuation in HTML / CSS

    How to vertically align in the middle a clickable image (between ) inside a div in a responsive manner?

    Use like this <div class="accounts"> <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a> </div> <div class="accounts"> <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a> </div> ...
    Read more

    How to give line-break from css, without using

    How to make 3-corner-rounded triangle in CSS

    How do I have the div displayed without having text content?

    How to load a small css background image before lots of other images (html element in .css file)?

    How to center verticaly n inline containers with different font-size?

    How to create new div immediately next to image like on Facebook's news feed on right side of page?

    How do I position the search box to my specs?

    How do you refer to more than one .css file in html?

    How can I place two DIVs inside a horizontal fixed header and make all the content vertically align?

    how to change the background color of the holder of an image using jquery cycle

    How to add CSS reference link to local HTML files in folder?

    How to add load more button for a HTML/CSS page?

    How to addClass() at RANDOM to an element in jQuery?

    Menu - Show up the Submenuitems under the whole Menuitems - HTML/CSS

    css how to stretch center div to fill allowable area

    My dropdown menu isn't showing below parent

    How do you add a footer with css display: table?

    jQuery Show/Hide for and

    How to align submenu to the left of container

    CSS - How to display dropdown text in one row?