Tagged Questions

Responsive design is the practice of using fluid structures and media queries in CSS to cater for multiple screen sizes.

learn more… | top users | synonyms

50
votes
8answers
41k views

iPhone 5 CSS media query

The iPhone 5 has a longer screen and it's not catching my website's mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries? My current ...
207
votes
3answers
54k views

Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

I'm getting confused about the various options in the twitter bootstrap grid, and how they go together. To begin with, you can have an ordinary fixed container, or a container-fluid. Then either ...
7
votes
2answers
507 views

What are the rules for CSS media query overlap?

How do we space out media queries accurately to avoid overlap? For example, if we consider the code: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and ...
9
votes
4answers
9k views

Good widths for media queries on responsive site

So I am working on my first "respoonsive" website which makes extensive use of media queries. I was wondering if there are some common page-widths I should optimize for. I will probably have a ...
4
votes
2answers
4k views

Jquery Masonry Seamless Responsive Image Grid

I'm looking to create a seamless (no gutters) fullscreen image grid using jquery masonry, where the images are fully responsive and are of varying widths. I've found a couple other starting points out ...
1
vote
1answer
508 views

How can I avoid media query overlap?

The cascade is what makes CSS special and powerful. But in the case of media queries, overlap can seem problematic. Consider the following CSS (continuing rules for CSS media query overlap): /* ...
1
vote
2answers
230 views

How to get rid of unwanted space between inline-block columns?

I'm attempting to use a css grid with widths set in % (so I can use it responsively) and without using floats (personal dislike!). In this instance, I'm using csswizardry-grids with the appropriate ...
29
votes
16answers
20k views

Is it possible to set a fluid width for Facebook's social plugins?

I'm developing a site around the "responsive design" concept, but the facebook social plugins are static width and "break" the layout when it's re-sized. Using media queries, I've set the plugins to ...
8
votes
2answers
6k views

Why do the order of media queries matter in CSS?

Of late, I've been designing sites that are more responsive and I've been using these media queries pretty frequently. One pattern I noticed is that the order in which the media queries are defined ...
6
votes
2answers
2k views

Responsive layout tutorial? [closed]

Is there any tutorials how to make responsive layout similar to this one - http://themes.hellominti.com/elogix/ ? I'm searching on whole internet, but can't find any normal tutorials, since all others ...
11
votes
2answers
8k views

Simple Bootstrap page is not responsive on the iphone

I downloaded Twitter Bootstrap example and create a simple rails project with it. I copied the css where needed and it displays fine. I also copied the js and everything works great on my deskop: it ...
5
votes
2answers
6k views

iOS Safari scroll to top does not work on certain pages. Why?

Disclaimer: The site has meanwhile been updated, this issue does not occur anymore with the new version of the design. On a new site I built I noticed a weird quirk in Safari (iOS 5). Usually you ...
3
votes
2answers
1k views

Sass and rounding down numbers. Can this be configured?

Is there any way for me to modify the way that Sass will handle decimal places? I saw a few people saying that Sass will dynamically do the (target/parent)*100 calculation needed for responsive ...
1
vote
2answers
3k views

CSS fluid layout: margin-top based on percentage grows when container width increases

I'm just learning CSS fluid layouts & responsive design, and I'm trying to use all percentage values with no px values in a layout. So far it seems to be working, but in one spot, I'm seeing ...
10
votes
1answer
9k views

Responsive Masonry jQuery layout example

Can anyone suggest how this site uses the jQuery Masonry plugin for its responsive, fluid layout? http://tympanus.net/codrops/collective/collective-2/ Specifically; The number of columns changes ...

1 2 3 4 5 … 11
15 30 50 per page