responsive-design

Full width list in CSS

由 别来无恙 提交于 2020-01-06 12:35:32
问题 I'm trying to implement and new layout for my site. I am capable of implementing this using JS but I'm trying to use pure CSS. And example would be http://tympanus.net/Development/GridLoadingEffects/ It starts out with 3 columns and when you resize the page smaller, the boxes resize until it gets small enough that it turns into two columns. Similar to that I'm trying to get my horizontal list of square images to take full width of the page with the square's max-width being 300px. So for

Responsive design toggle using Bootstrap

由 廉价感情. 提交于 2020-01-06 08:32:10
问题 I have this responsive design using Bootstrap's grid system: HTML <div class="container"> <div class="col-xs-12 col-md-7 view"> <div id="panelviewer"> <div class="row"> <div class="col-xs-12 col-md-6 panel1"><a href="javascript:void(0)">ONE</a></div> <div class="col-xs-12 col-md-6 panel2"><br><br><a href="javascript:void(0)">TWO</a></div> </div> </div> </div> </div> CSS .container { max-width:600px; overflow:visible; } .view { border:dashed #333 1px; } .row { overflow:visible; } #panelviewer

How can I scale sprite sheet images to a container?

由 旧街凉风 提交于 2020-01-06 05:28:26
问题 I have a container with a background image that scales to the width of a screen, up to a maximum size of 1400px. I want to take icons from a sprite sheet and scale them proportionally to how the container is scaling. The size of the icons, as well as the placement of the icons within the container are important. At the maximum size of 1400px, everything is great. But when scaling down, I want the icons to also scale down in size and keep the correct positioning relative to the background

responsive website design is not working on mobile phone

由 自闭症网瘾萝莉.ら 提交于 2020-01-06 05:02:06
问题 responsive design is not working on my mobile phone but its working fine on my pc or laptop i am working on this link (http://abisyscorp.com/modelview) <head> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> <meta name="viewport" content="max-width=480px"> <meta name="viewport" content="min-width=481px"> <meta name="viewport" content="min-width=1028px"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <!--

Masonry giving container 0 height

由 こ雲淡風輕ζ 提交于 2020-01-05 13:12:13
问题 I'm working on some stuff that involves a responsive masonry layout. I have a container that has a max-width of 960px but scales down with the browser. My grid items have a percentage-based width (100%, 66.666666etc%, 33.33333etc%). For some reason, when I pass a function to the columnWidth option, it always gives the container a height of 0. This is how I'm instantiating Masonry. $(window).load(function() { var $container; $container = $("#grid_container"); $container.masonry({ columnWidth:

How to make opt-in responsive so it stays in the correct place on smaller screens

由 こ雲淡風輕ζ 提交于 2020-01-05 12:24:52
问题 I added an opt-in form/freebie sign up in the header area on the following site: http://www.clearcreativecoaching.com/ This site is using the Mantra Wordpress theme. When you minimize your browser window you will see that the opt-in form moves out of place. Is there a code I can put in to make the opt-in form responsive so that it stays in its proper place on any sized screen/window. Before I got this project, a plugin was installed to create a mobile site for this website. I don't believe it

Responsive perfect squares inside a fixed positioned div. could anyone help me?

由 一曲冷凌霜 提交于 2020-01-05 12:11:48
问题 I have a fixed positioned div at the bottom of my web (oriented just for mobiles). Inside I have 5 links, and I would like these links to be perfect squares always but I want to avoid to use any fixed size so I'm trying always to use "%". These squares needs to be always distribute using the full width of the container. html so simple: <div class="container"> <a href="#" class="facebook"> </a> <a href="#" class="info"> </a> <a href="#" class="contacto"> </a> <a href="#" class="telefono"> </a>

Responsive perfect squares inside a fixed positioned div. could anyone help me?

由 爱⌒轻易说出口 提交于 2020-01-05 12:10:27
问题 I have a fixed positioned div at the bottom of my web (oriented just for mobiles). Inside I have 5 links, and I would like these links to be perfect squares always but I want to avoid to use any fixed size so I'm trying always to use "%". These squares needs to be always distribute using the full width of the container. html so simple: <div class="container"> <a href="#" class="facebook"> </a> <a href="#" class="info"> </a> <a href="#" class="contacto"> </a> <a href="#" class="telefono"> </a>

Bootstrap 3 inputs read-only in desktop mode but not on small devices

由 自闭症网瘾萝莉.ら 提交于 2020-01-05 06:38:28
问题 I am having trouble with boostrap 3 causing deactivated/read-only inputs in desktop mode. Once you resize the browser window to a smaller size bootstrap activates the inputs to read-write. I am clueless why, of course they should be activated on all devices. Any help will be appreciated! I tried having the .form-group arround the .col-sm-x .col-md-x .col-lg-x divs and a few other tweaks, the inputs only enable once they are completely outside of the .col-sm-x .col-md-x .col-lg-x , which

Fluid video height

由 …衆ロ難τιáo~ 提交于 2020-01-04 18:13:07
问题 I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.
订阅 responsive-design