Is it possible to set a fluid width for Facebook’s social plugins?
none of these methods worked but using this idea, the following worked for me: .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe { width: 100% !important; }
responsive-design
flex item overflows container due to long word even after using word-wrap
Instead of setting a max-width for your flex item, use a min-width declaration. By default, if no min-width is set, the item’s content min-width is assumed and the flex item’s width will never be smaller. By setting a min-width of e.g. 40%, the item will shrink to at most 40% of the flex parent. .child2, … Read more
jQuery: How to detect window width on the fly?
Changing a variable doesn’t magically execute code within the if-block. Place the common code in a function, then bind the event, and call the function: $(document).ready(function() { // Optimalisation: Store the references outside the event handler: var $window = $(window); var $pane = $(‘#pane1’); function checkWidth() { var windowsize = $window.width(); if (windowsize > 440) … Read more
Automatically resize images with browser size using CSS
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8. source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries for example : img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } and then … Read more
Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems
.modal { overflow-y: auto; } .modal-open { overflow: auto; } Will get rid of it. This was added to make the modals work more responsively, so you could scroll down and see a modal if the screen was too short. It also stops the background from being scrollable while a modal is up. If you … Read more
Specifying a preferred line break point in HTML text in a responsive design [duplicate]
I think this works very well: span.line { display: inline-block; } <p> <span class=”line”>This text should break</span> <span class=”line”>after the word “break”</span> </p> The text still breaks on other places when there is not enough space: open demo
Simple Bootstrap page is not responsive on the iPhone
Make sure you add: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> to your <head>. I had a similar problem and I mistakenly thought it was just a matter of viewport width. Update: check out @NicolasBADIA answer for a more complete version.
Should I use max-device-width or max-width?
TL;DR If you’re making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes. According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided. 8. Appendix … Read more
How to remove responsive features in Twitter Bootstrap 3?
To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this: // Media queries breakpoints // ————————————————– // Extra small screen / phone // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 1px; @screen-xs-min: @screen-xs; @screen-phone: … Read more
CSS scale height to match width – possibly with a formfactor
Here it is. Pure CSS. You do need one extra ‘container’ element. The fiddle (tinkerbin, actually): http://tinkerbin.com/rQ71nWDT (Tinkerbin is dead.) The solution. Note I’m using an 100% throughout the example. You can use whichever percentage you’d like. Since height percentages are relative to the height of the parent element, we can’t rely on it. We … Read more