StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20619367
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-12-16T19:35:15.387
FavoriteCount
0
LastActivityDate
2013-12-16T19:35:15.387
LastEditDate
LastEditorUserId
0
OwnerUserId
310139
ParentId
20584292
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
If you're not too heavily invested in CSS Media Queries, maybe you can try <a href="http://plugin.restive.io" rel="nofollow">Restive Plugin</a>. It makes things a little easier when you're building Responsive Web Sites (or Retrofitting Desktop Web Sites for Mobile). There's a 'Getting Started' guide here: <a href="http://blog.restive.io/posts/5852603/getting-started-with-restive-plugin" rel="nofollow">http://blog.restive.io/posts/5852603/getting-started-with-restive-plugin</a>, and an Operational Comparison with CSS Media Queries here: <a href="http://blog.restive.io/posts/4887492/css-media-queries-vs-restive-plugin" rel="nofollow">http://blog.restive.io/posts/4887492/css-media-queries-vs-restive-plugin</a> Install and Setup for your specific case would be: <pre><code> <script type="text/javascript" src="jquery.min.js"></script>  <script type="text/javascript" src="restive.min.js"></script>  <script> $( document ).ready(function() { $('body').restive({ breakpoints: ['250', '320', '480', '620', '710', '940'], classes: ['rp_250', 'rp_320', 'rp_480', 'rp_620', 'rp_710', 'rp_940'], turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet', force_dip: true }); }); </script> </code></pre> <code>breakpoints</code> and <code>classes</code> manages your breakpoints and subsequent class additions to the DOM. So as you see above, Restive Plugin will create the following breakpoint ranges: <code>0 to 250</code>, <code>251 to 320</code>, <code>321 to 480</code>, <code>481 to 620</code>, <code>621 to 710</code>, and <code>711 to 940</code>. It will then add the corresponding values in <code>classes</code> as mobile devices match said breakpoints. So if an <code>iPhone 3GS</code> visits your Web Site, <code>rp_320</code> will be added to the <code>class</code> attribute of the <code><body></code> tag (since the device has a viewport width of 320 pixels [in portait]). <code>turbo_classes</code> is a special feature of Restive Plugin that will add classes to the <code><body></code> tag on specific conditions being met. So if the device <code>is_mobile</code>, it will add <code>mobi</code>, if the device <code>is_phone</code> it will add <code>phone</code>, and so on. You can get more in-depth information from <a href="http://docs.restive.io/plugin" rel="nofollow">Restive Plugin Docs</a> <code>force_dip</code> forces Restive Plugin to use Device-Independent Pixels for <code>breakpoints</code> (the default behavior is for it to use Device Pixels) so that an <code>iPhone3GS</code> (Pixel Ratio of 1) and an <code>iPhone 4S</code> (Pixel Ratio of 2) will be caught by the same breakpoint i.e. <code>251 to 320</code>, which is what CSS Media Queries would do. So with our above setup, Restive Plugin will add <code>mobi phone rp_320</code> to the <code>class</code> attribute of the <code><body></code> tag if the device is an <code>iPhone 4S</code> or <code>iPhone 3GS</code>. Everything else you do after install and setup is pure CSS without media queries. So if you wanted to do something for devices caught by <code>251 to 320</code> breakpoint, you can simply add it to your CSS file e.g. your Menu-Bar Container: <pre><code>.mobi.rp_320 .menuBarContainer {display: none;} </code></pre> This will hide your menu bar for any device that falls within that breakpoint. However, you could also do something even more broad e.g. hiding your Menu-Bar Container on all phones (this is what <code>turbo_classes</code> enabled): <pre><code>.mobi.phone .menuBarContainer {display: none;} </code></pre> And you can do something similar for tablets as well: <pre><code>.mobi.tablet .menuBarContainer {display: none;} </code></pre> You now have freedom to build your Web Sites and setup complex behaviour arrangements using pure CSS and not having to worry about <code>@media</code> queries. Restive Plugin does a lot for you in the...errmm...frontend?! It might take getting used to a different mindset, but it'll probably help you be more nimble when building Responsive Web Sites in future. Full disclosure: I developed the Plugin.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POCss Media Queries not working fine
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USObinwanne Hill
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.