Use the @import method: @import url(‘https://fonts.googleapis.com/css?family=Open+Sans&display=swap’); Obviously, “Open Sans” (Open+Sans) is the font that is imported. So replace it with yours. If the font’s name has multiple words, URL-encode it by adding a + sign between each word, as I did. Make sure to place the @import at the very top of your CSS, before … Read more
Here’s a generic solution that keeps the child element in the document flow: .child { width: 100vw; position: relative; left: calc(-50vw + 50%); } We set the width of the child element to fill the entire viewport width, then we make it meet the edge of the screen by moving it to the left by … Read more
Bootstrap does the same thing (… as the selected answer below). @media print { a[href]:after { content: ” (” attr(href) “)”; } } Just remove it from there, or override it in your own print stylesheet: @media print { a[href]:after { content: none !important; } }
Span is an inline element. It has no width or height. You could turn it into a block-level element, then it will accept your dimension directives. span.product__specfield_8_arrow { display: inline-block; /* or block */ }
The following should do the trick: div[class^=’myclass’], div[class*=’ myclass’]{ color: #F00; } Edit: Added wildcard (*) as suggested by David
The easiest is to put overflow:hidden on the parent div and don’t specify a height: #parent { overflow: hidden } Another way is to also float the parent div: #parent { float: left; width: 100% } Another way uses a clear element: <div class=”parent”> <img class=”floated_child” src=”https://stackoverflow.com/questions/2062258/…” /> <span class=”clear”></span> </div> CSS span.clear { clear: … Read more
I’ve spoken to Tab Atkins (author of the flexbox spec) about this, and this is what we came up with: HTML: <div class=”content”> <div class=”box”> <div class=”column”>Column 1</div> <div class=”column”>Column 2</div> <div class=”column”>Column 3</div> </div> </div> CSS: .content { flex: 1; display: flex; overflow: auto; } .box { display: flex; min-height: min-content; /* needs vendor … Read more
Make it simple : DEMO section { display: flex; flex-flow: column; height: 300px; } header { background: tomato; /* no flex rules, it will grow */ } div { flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/ background: gold; overflow: auto; } footer … Read more
This is precisely what position: fixed was designed for: #footer { position: fixed; bottom: 0; width: 100%; } Here’s the fiddle: http://jsfiddle.net/uw8f9/
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe. Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server. I use the Prototype framework … Read more