responsive-design

Fixed Bootstrap navbar disappearing with 768 x 1024 view

由 荒凉一梦 提交于 2019-12-07 15:58:55
问题 I downloaded the bootstrap AZY responsive 1 page template and cannot get the fixed navbar to stay at the top of the screen for 768 x 1024 (iPad - Portrait) resolution. It remains fixed at the top for all others from 240 x 320 to 1024 x 768. I've created a fiddle: http://jsfiddle.net/B2sw6/ I tried using this but it didn't work: .navbar-fixed-top { position: fixed; right: 0; left: 0; z-index: 1030; top: 0; } If you drag the center divider bar across to approx. 768px width you will see the

Ruby unable to find Foundation/foundation-global?

由 爱⌒轻易说出口 提交于 2019-12-07 15:20:42
问题 Yesterday I decided to give Foundation a try on one of my web apps. Everything worked fine as I was in localhost, but when I pushed the new changes to my EC2 instance, continuing to follow the Zurb Foundation instructions, I ran into this error: Sass::SyntaxError in Home#index Showing /var/www/brain_db/app/views/layouts/application.html.erb where line #18 raised: File to import not found or unreadable: foundation/foundation-global. Load path: Sass::Rails::Importer(/var/www/brain_db/app/assets

twitter boostrap (responsive) : .span3 taking .span6 full width behaviour when width between 320px and 797px

由 半城伤御伤魂 提交于 2019-12-07 15:14:23
With twitter bootstrap.css and bootstrap-responsive.css, .span* become equivalent to a .span12 under 768px . This behaviour is perfectly fine when text is embedded, but for pictures it make sense to use a 2x2 layout between 4x1 and 1x4 . How to obtain this 2x2 layout from 767px to 320px ? 768px wide (4x1) 767px wide (1x4) HTML: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail" href="#"> <img alt="" src="http://placehold.it/200x150"> <p>1</p> </div> </li> <li class="span3"> <div class="thumbnail" href="#"> <img alt="" src="http://placehold.it/200x150"> <p

CSS Flexbox - Organizing flex items based on screen size

由 我的梦境 提交于 2019-12-07 14:52:20
问题 I have a container of flex items that I am trying to organize in different layouts with different number of flex items depending on screen size. For example, on desktop, I'd like to have 4 containers, each with 2 items laid out in a 2x4 grid and each cell is 1x2. What I can't seem to wrap my head around is the getting the layout on tablet using purely with flexbox. Any pointers in the right direction would be great. div { box-sizing: border-box; width: 100%; } .container { display: flex;

Twitter Bootstrap 3 responsive full height grid

由 十年热恋 提交于 2019-12-07 13:08:16
问题 First of all, sorry for my poor english :S. I want a responsive full height grid using bootstrap 3. My problem is the grid, I don't know how to set 100% height to container and the inside divs. Width is perfect but height :S. I try with this CSS but it doesn't work: html body .container-fluid{ min-height:100%; height:100%; } .border3{ min-height:20%; height:20%; } .border4{ min-height:20%; height:20%; } .border5{ min-height:20%; height:20%; } HTML+CSS: http://jsfiddle.net/z5dpu7od/1/ Maybe I

How to implement responsive font size in rem - bootstrap

由 ▼魔方 西西 提交于 2019-12-07 12:55:02
问题 I am using bootstrap 3 in my project and I see that there are 2 declarations of font-size in bootstrap as below: Scaffolding.less html { font-size:10px;} body{ font-size : @font-base-size; } And the @font-base-size is defined as 14px in variables.less I have been reading stuff where one way of having responsive font size was to have base font size as px defined in body or html as then use font sizes in rem for different components in body such as p, h1 etc. But I am not sure, where do I

Fullwidth child DIV inside wrapper

由 给你一囗甜甜゛ 提交于 2019-12-07 12:46:40
问题 I will go straight to the point. I have a child div that has width of 100% and it is located under wrapper that has a fixed width.I was wondering how can i make the child div "break out" and have 100% full screen page width. Code goes like this, i tried playing with relative/absolute positioning but no luck. <div class="wrapper"> <div class="banners"> <div class="first"><img src="http://placehold.it/200x200"></div> <div class="second"><img src="http://placehold.it/200x200"></div> </div> </div

Force a line break inside the button's text when using small screens

由 旧街凉风 提交于 2019-12-07 11:54:21
问题 I have a responsive web app that contains some buttons which are too large for small mobile screens. They have too much text in them so they end up going off the screen. I am currently using the a tag as a button by given them bootstrap classes. So the code currently looks like this: <a className='btn btn-default'>Here I have a button with long text in it, which causes some text to go off screen when in small mobile devices.</a> I would like add a line break to the text, so that way it won't

Open, truly responsive, mobile-friendly lightbox [closed]

由 泪湿孤枕 提交于 2019-12-07 11:47:40
问题 As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 6 years ago . I'm looking for suggestions for a lightbox plugin that is responsive and mobile-friendly. Update The following are great for dialogs

Why won't my viewport tag properly use device width (no zoom) on most mobile devices?

由 烈酒焚心 提交于 2019-12-07 10:03:50
问题 UPDATE 03/2019: This Q&A still gets some activity, nearly 5 years my question came up. Please note this problem was due in part to more common irregularities in older mobile devices at THAT time. With today's browsers and devices, fiddling with viewport scalability would be a shoe-horn fix to a bigger problem which is likely a problem in either your CSS or possibly your markup. I've built a dozen responsive sites and have never experienced this problem. Basically, I'm using the meta tag for
订阅 responsive-design