responsive-design

Responsive Bootstrap Jumbotron Background Image

by

I’m using bootstrap jumbotron, and including a background image. Resizing the screen makes the image tile and repeat, whereas I want the image to be responsively resized. <div class=”jumbotron” style=”background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;”> <div class=”container for-about”> <h1>About</h1> </div> </div> How would you go about making the image responsive? The site is HERE. Thanks for your … Read more

What is the context of em?

by

In this example: THE CSS h1 { font-size: 2em; } .smaller { font-size: 0.5em; } THE HTML <h1>Hi, I am a <span class=”smaller”>toad</span></h1> Will the word “toad” be 0.5 times 16px (the browser’s standard font-size) or will it be 0.5 times 2em (the font-size of the h1)? Answer It’s equal to the computed value of … Read more

Website elements and fonts are too small in mobile devices

by

I have just finished designing and coding my new project. But I need it to work well in mobiles. I resized my screen to something like 350~400px width and started coding and adding some media-queries to it. Looks great in redimensioned browsers. I have cut some elements and features and everything was fine… until I … Read more

responsive D3 chart

by

I have this D3 chart – pretty much out of the box. Is there a way to make it responsive and use percentages for the width and height variables, innerRadius, and outerRadius? I’m workign on a responsive site and need this to change based on screen size/browser size. jsfiddle here: http://jsfiddle.net/BTfmH/1/ Code: <!DOCTYPE html> <html> … Read more

Limit the height of a responsive image with css

by

My end goal is to have a fluid <img> that won’t expand past an explicitly set height of a parent/grandparent element using only css. Currently I’m doing this with a normal (max-width:100; height:auto;) fluid image and javascript by reading the height/width attributes from the img tag, calculating the aspect ratio, calculating the correct width of … Read more

flex item overflows container due to long word even after using word-wrap

by

.parent{ width:100%; display:flex; flex-direction:row; flex-wrap:nowrap; padding:1em; background-color:red; box-sizing:border-box; } .child1{ background-color:mistyrose; padding:1em; } .child2{ background-color:powderblue; padding:.5em; word-wrap:break-word; max-width:500px; } .child3{ background-color:powderblue; padding:.5em; word-wrap:break-word; } <div class=”parent”> <div class=”child1″> question </div> <div class=”child2″> somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething </div> </div> <div class=”parent”> <div class=”child1″> question </div> <div class=”child3″> somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething </div> </div> The main issue with the above code is ,child3 … Read more