responsive-design

Cannot get FlowType.js to work

由 流过昼夜 提交于 2019-12-25 02:46:10
问题 I've inserted the following right before the </body> tag and the type isn't changing at all. I can't figure out what I'm doing wrong. https://github.com/simplefocus/FlowType.JS http://jsfiddle.net/tawshmcd/gLJxE/ -- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="https://raw.github.com/simplefocus/FlowType.JS/master/flowtype.js"></script> <script> $('body')

Div not letting 100% of width when resizing browser

由 风流意气都作罢 提交于 2019-12-25 01:48:56
问题 I remember it used to work when I set the width to 100% once resized at certain pixels from desktop to tablets to mobile. Just don't know why mine won't work this time around for some reason. Trying to get header, content, and footer to be 100% of its width when resizing its pixels. FYI, haven't got to the footer yet. *. { width: 100%; } body { font-family: Andale Mono, monospace; } p { font-size: 24px; } .header { padding: 200px; text-align: center; background-color: #001f4d; } .header h1 {

CSS Breakpoints for Responsive Design

由 徘徊边缘 提交于 2019-12-25 01:44:42
问题 Twitter Boot strap uses these break points: Large Display: 1200px Default: 980px Tablet: 768px Mobile: 480px A client said they are using 1280px for their Large Display breakpoint. Is there an industry standard for these or are they just made up as we go right now? 回答1: No there isn't an industry standard - really you should choose application / website specific breakpoints. Each UI and design will need different breakpoints. Making break points device agonistic is also recommend. http:/

Responsive CSS: em's wont resize lower than <0.5em

由 牧云@^-^@ 提交于 2019-12-25 01:33:02
问题 I am coding my first responsive layout using CSS @media queries. I've added the <meta name="viewport" content="width=device-width"> to my html so I have a strict series of device-width based font-size layouts. And, I'm using em 's to (hopefully) give the most consistant browser resizing with html, body {width/height:100%; font-size: 1em} . In my smallest case, I want to put the <h2> tag at a relatively small em in the range of < 0.5em. However, once I go below that amount it no longer resizes

Create a div with a line through the middle of a circle with text in the centre

由 我们两清 提交于 2019-12-25 00:44:24
问题 Is it possible to create a div with a line through the middle of a circle with text in the centre like above? It needs to be responsive so it will scale with the page. here is my code so far. I need a way to draw the line behind the circle now http://jsfiddle.net/Jyjjx/87/ <div class="container"> <div class="round-button"> <div class="round-button-circle"><span class="round-button">G</span> </div> </div> <div> .container { width:100%; height:100%; background:red; } .round-button { width:25%;

Identical CSS working on JSFiddle, broken in browser

由 白昼怎懂夜的黑 提交于 2019-12-25 00:42:45
问题 I'm trying to make responsive tables using the No More Tables approach. I've simply copied and pasted the code from the example above. It works fine on JSFiddle: http://jsfiddle.net/wcp62x7t/ But identical code in my browser does not work fine. The tables do not behave nicely when I reduce the size of the browser window: What am I doing wrong? Here's the complete HTML file that I'm trying in my browser: I've tried it in both Safari and Chrome on OSX and get the odd behaviour above. <html>

initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile

由 心不动则不痛 提交于 2019-12-24 23:51:38
问题 So I'm pretty stumped right now. I'm building a responsive website using the theme Delicate. It comes in built with the meta tag Which I was under the impression would set the entirety of the content on the screen width. On my phone I have to zoom out to have the content displayed somewhat nicely. I've tried changing the initial-scale value to 0.65 which made the site look nice on my personal phone which I am using to develop but it doesn't work well on the iphone 6 or other devices. I've

Jquery toggle on responsive site

由 半腔热情 提交于 2019-12-24 22:14:50
问题 I'm working on a responsive site where I have a menu containing categories. As the viewport shrinks for smaller devices the category box gets hidden and a single button appears that someone can click and using jquery it toggles the category nav. The problem is that if you re-size the screen once you've toggled the nav, it doesn't re-appear properly when you go back to a larger viewport. I'm not sure how to fix this or if there is a better way around it. I have an example here: http://jsfiddle

How can I represent tabular data responsively?

由 三世轮回 提交于 2019-12-24 20:39:47
问题 I have a table which I need to display. On a desktop, it is simple: 4 rows and 10 columns. <table width='100%'> <thead> <tr><th colspan='10'>Size Chart (inches)</th></tr> <tr><th>Size</th><th>6</th><th>8</th><th>10</th><th>12</th><th>14</th><th>16</th><th>18</th><th>20</th><th>22</th></tr> </thead> <tbody> <tr><td class='head'>Bust</td><td class='odd'>35½</td><td>36½</td><td class='odd'>37½</td><td>39</td><td class='odd'>40½</td><td>42½</td><td class='odd'>44½</td><td>46½</td><td class='odd'

How to anchor a <div> to the lower left of a table cell without destroying responsiveness?

由 心已入冬 提交于 2019-12-24 18:23:16
问题 The short of it is that, in a table, on a responsive web page, I added a <div> within the <td> s and anchored it to the bottom left of the cell by putting position: relative on the <td> and position: absolute; bottom: 0; left: 0; on the <div> . That seems to have broken the page's responsiveness. Now, there is horizontal overflow scrolling on the whole page at a breakpoint of about 1260px . Above that width, the page is fine; below that point, the horizontal overflow scrolling appears. I need
订阅 responsive-design