responsive-design – Page 10

responsive D3 chart

March 25, 2023 by Tarik

You can make the chart resize using a combination of viewBox and preserveAspectRatio attributes on the SVG element. See this jsfiddle for the full example: http://jsfiddle.net/BTfmH/12/ var svg = d3.select(‘.chart-container’).append(“svg”) .attr(“width”, ‘100%’) .attr(“height”, ‘100%’) .attr(‘viewBox’,’0 0 ‘+Math.min(width,height)+’ ‘+Math.min(width,height)) .attr(‘preserveAspectRatio’,’xMinYMin’) .append(“g”) .attr(“transform”, “translate(” + Math.min(width,height) / 2 + “,” + Math.min(width,height) / 2 + “)”); You … Read more

How do I vertically center an H1 in a div?

March 25, 2023 by Tarik

you can achieve vertical aligning with display:table-cell: #section1 { height: 90%; text-align:center; display:table; width:100%; } #section1 h1 {display:table-cell; vertical-align:middle} Example Update – CSS3 For an alternate way to vertical align, you can use the following css 3 which should be supported in all the latest browsers: #section1 { height: 90%; width:100%; display:flex; align-items: center; justify-content: … Read more

Change hover color on a button with Bootstrap customization

March 23, 2023 by Tarik

The color for your buttons comes from the btn-x classes (e.g., btn-primary, btn-success), so if you want to manually change the colors by writing your own custom css rules, you’ll need to change: /*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/ .btn-primary { color: #fff; background-color: #0495c9; … Read more

Scale iFrame css width 100% like an image

March 21, 2023 by Tarik

Big difference between an image and an iframe is the fact that an image keeps its aspect-ratio. You could combine an image and an iframe with will result in a responsive iframe. Hope this answerers your question. Check this link for example : http://jsfiddle.net/Masau/7WRHM/ HTML: <div class=”wrapper”> <div class=”h_iframe”> <!– a transparent image is preferable … Read more

Limit the height of a responsive image with css

March 8, 2023 by Tarik

The trick is to add both max-height: 100%; and max-width: 100%; to .container img. Example CSS: .container { width: 300px; border: dashed blue 1px; } .container img { max-height: 100%; max-width: 100%; } In this way, you can vary the specified width of .container in whatever way you want (200px or 10% for example), and … Read more

Switching to Em-Based Media Queries

March 7, 2023 by Tarik

In modern browsers there should be no difference between em-based and pixel-based media queries if the browser handles the zoom correctly. I actually had trouble with em-based media queries in one project because in one of the media queries the base font size changed and then all of the other media queries got messed up. … Read more

Full-screen responsive background image

March 6, 2023 by Tarik

Perfect Full Page Background Image //HTML <img src=”https://stackoverflow.com/questions/16548338/images/bg.jpg” id=”bg” alt=””> //CSS #bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; } OR img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up … Read more

How to make the Facebook Like Box responsive?

March 4, 2023 by Tarik

NOTE: this answer is obsolete. See the community wiki answer below for an up-to-date solution. I found this Gist today and it works perfectly: https://gist.github.com/2571173 (Many thanks to https://gist.github.com/smeranda) /* Make the Facebook Like box responsive (fluid width) https://developers.facebook.com/docs/reference/plugins/like-box/ */ /* This element holds injected scripts inside iframes that in some cases may stretch layouts. … Read more

Website elements and fonts are too small in mobile devices

March 2, 2023 by Tarik

You can try adding the viewport <meta> tag : <meta name=”viewport” content=”width=device-width, initial-scale=1″> Using the viewport meta tag to control layout on mobile browsers

Creating a fixed sidebar alongside a centered Bootstrap 3 grid

February 26, 2023 by Tarik

As drew_w said, you can find a good example here. HTML <div id=”wrapper”> <div id=”sidebar-wrapper”> <ul class=”sidebar-nav”> <li class=”sidebar-brand”><a href=”#”>Home</a></li> <li><a href=”#”>Another link</a></li> <li><a href=”#”>Next link</a></li> <li><a href=”#”>Last link</a></li> </ul> </div> <div id=”page-content-wrapper”> <div class=”page-content”> <div class=”container”> <div class=”row”> <div class=”col-md-12″> <!– content of page –> </div> </div> </div> </div> </div> </div> CSS #wrapper { … Read more