responsive-design

问题 I've tried to render a responsive table layout so that it shows a line of 12 columns on a desktop per each record of a table, 3 lines of 4 columns on a tablet and 6 of 2 cols on a smartphone. What I've already done is to define a CSS3 with media queries and a demo html table The issue is that - with the current implementation - the headers are always on top while I'd like to show them together with the cell values for small width views (smartphone/tablet), but I've no idea how to achieve this

问题 i'm learning programming with a friend at the moment and we wanted both to make our sites. We're facing a problem with some Front-End menu. We want it to be a onepage but in MVC so we could swap between those "onepages" with different content. To do the one page website we followed this tutorial: http://1stwebdesigner.com/parallax-scrolling-tutorial/ and now we face a problem with adjusting the menu. We want it to look the same no matter what resolution the person views it use. Here is some

问题 This is my first post on stack overflow. I am having a bit of difficulty developing a responsive website layout. When my browser window is less than 400px wide my menu changes to a mobile style design. You can see an example of this in its expanded form below: What I want to achieve is that when I click 'Menu' to collapse the dropdown, the content below should move up to just below the menu. Another image will help illustrate the problem: As you can see there is a whitespace above the content

问题 I've made a responsive menu for a one page website that switches to a toggleable menu, when the window width is lower than 768px. Basically I want the menu to be toggled by a click on the header and closed by another click on a menu link ( li -element). My jQuery code so far: jQuery(document).ready(function() { var e = $("#pull"); menu = $("#header ul"), $(e).on("click", function(e) { e.preventDefault(), menu.slideToggle() }), $(window).resize(function() { menu.is(":hidden") && menu

问题 I am having the following HTML: <div class='layout-wrap'> <div class='mod-header'> <a class='logo' href="#"></a> <nav> <a class="action" href="#">Join now</a> <ul class="tour"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> <ul class="search"> <li><a class="find" href="#">search</a></li> </ul> </nav> </div> </div> See also: http://jsfiddle.net/mulderp/fZ8cW/ And CSS: .logo { text-indent: -9999px; float: left; width: 16rem; } nav { float:

问题 I have tried everything in my knowledge (however little there is), but I can not make the top bar menu render properly on small screens. I want the menu to reduce down to a clickable menu item on small screens, basically responsive behaviour from the menu. Apparently the following code alone should make it work, but it doesn't. <header> <div class="row"> <div class="large-12 large-centered small-12 small-centered columns"> <nav class="top-bar" data-topbar role="navigation"> <section class=

问题 I am trying to create an off-canvas menu with foundation 6 like it's done in the official site. When it comes to the mobile menu bar, I'd like to make it sticky to the bottom of the screen. .title-bar { position: fixed; width: 100%; bottom: 0; } But as soon as I click the mobile menu, the menu bar jumps away as if it was absolute instead of fixed . Anyone had this problem and solved it yet? 回答1: There are a few changes to be made. The <div class="content"> should be mentioned inside the <div

问题 I have a picture with a text overlay, inside a box. This is a responsive design, so the box does not have fixed dimensions. I want to move the text overlay from the top to the bottom, but with a nice smooth animation that does this. The animation must play on hover. I already figured out how to do this, but I don't have the animation. This is roughly what the HTML looks like: <div class="box"> <div class="box_content"> <img class="inner_img" src="http://placehold.it/1000x1000" /> <div class=

问题 FIDDLE Basically, the goal is to have side-by-side columns with dynamically-generated content, and have the divs inside the columns be the same height as the div with the longest content. The important thing is not only that the Bootstrap columns be the same height, but their child divs also be the same height. After cobbling together answers from several different questions, I finally managed to get this to work by using a combination of table-cell and setting the height of everything to 100

问题 I'm using 3 background images to display as icon for a mobile site which appear perfectly fine on my computer (using window sizes and user agents), however, on my iphone the icon is cut off as if the padding isn't high enough. This is how it appears on desktop ^ However, on mobile it has this effect v Any ideas what's causing this? the padding, when set to 20%, is enough to display the icon with a few pixels left over in all screen sizes, but even when set to 22% it doesn't display correctly