I am using Bootstraps grid system to create a responsive site that displays content in containers, never exceeding the viewing height, and display width using three columns, unless viewed through a small screen, in which case then 1 column. Problem is, my youtube embed is not responsive. I've tried setting it to 100%, auto, using several bootstrap classes, switching from embed to iframe and trying many of the same ideas. Nothing is working. I end up with a small static height of about 100px, no matter the width. Here is my html.
<div class="row">
<div class="col-md-4"><center>
<h1>Once in a lifetime</h1>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksg
</p>
</center></div>
<div class="col-md-4"><center>
<embed width="80%" height="100%" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1" frameborder="0" allowfullscreen></embed>
</center></div>
<div class="col-md-4"><center>
<h1>Check it out!</h1>
<h3>http://wwww.link.xyz</h3>
</center></div>
</div>
and here is some css I'm using to prevent horizontal scroll.
html, body {
max-width: 100%;
height:100%;
overflow-x: hidden;
}
Please help.
Using any of the snippets below will allow browsers to determine video dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1"></iframe>
</div>
You may want to checkout bootstrap documentation for more info on this
http://getbootstrap.com/components/
Related
I'm working on a blog that has large runs of text with interspersed images that are floating to the right. In a maximized browser, this looks fine; however, on smaller screens/windows, the text has a tendency to be squashed by the images. When that happens, I'd like to prevent the text from running on either side of the images, e.g. by setting float: none on the images.
The CMS uses <br><br> instead of <p>...</p>, so we can't easily set a min-width on the text. It looks something like this:
<article class="content">
Text
<div class="float-right">
<img>
</div>
Text
<article>
.float-right could be any width, and, in some cases, could change width as the user interacts with the page.
Is it possible to prevent the text from getting "squashed" with just CSS? If not, I'll likely look into modifying how the CMS generates the HTML; I'd rather not use JavaScript for this.
H everyone. Please help me out. I am using this grid based framework. in the middle I have 3 images like this
<section class="row">
<div class="col-4">
<img src="img/seo.jpg" alt="seo work" class="work-type">
<h3 class="work-title">seo specialist</h3>
</div>
<div class="col-4">
<img src="img/webdesign.jpg" alt="web design work" class="work-type">
<h3 class="work-title">web designer</h3>
And for the specific img class I am having this CSS for making it responsive
.work-type{
max-width: 100%;
height: auto;
}
Now. three images have different height and they are taking different space height wise inside the grid box. what CSS do I use to have them all appear with the same height?
You can do this easily with CSS and background images.
http://codepen.io/anon/pen/EyZxoP
In this codepen, I display your current issue with the proposed solution.
If you want the images to be a part of the markup, then you'll need to provide more information about the solution you're looking for. (What should happen with the images that are being forced to become the same dimensions? Are we stretching them? Cropping? Are these images dynamically loaded? Hardcoded in the source? Are they featured images for a custom post type, like a staff post-type? Is this wordpress? Contextual layout details would be good, too.)
I've given divs the background-image properties to quickly/easily avoid skewing and stretching, as well as any other form of distortion because of layout stuff. This method can be used for responsive layouts as well.
.img-cont{
height:200px;
width:200px;
}
I'm building a section with a text on the left side and a background image tied to a right side of a browser. Both text and image have about 50% width while using desktop device.
For desktop device solution, I've coded it like this:
http://www.bootply.com/xxyOcA9N5n
However, problem arises when I try to make it responsive. My preferred goal would be that the content gradually "pushes" background image to the right (out of the browser's "canvas"). In extreme case, it would look like this: Image nearly disappeared and text is readable.
Can you please help me figure out, how to solve this?
Add another col-sm-6 and place the image in there with a 100% width so it scales as the size gets smaller. You can also use media queries to define how you want it to look at various sizes.
<div class="container-fluid hp-about">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Company</h2>
<p class="large">We are doing this and this and it is
awesome because this and that. Yeah and also this and that.
And also that.</p>
<p>More about us »</p>
</div>
<div class="col-sm-6"><img src=
"http://i.imgur.com/HGp1ot6.png"></div>
</div>
</div>
</div>
I wanted to make two divs to be equal in height , yes from various forums and blogs i found the way of doing that. Though i made it work still these CSS rules(mentioned in query part) are bothering me and doesn't seems to be understandable.
here's the mark up:-
<div class="container">
<div class="left-col">
Hello there , This is Left content<br/>
Hello there , This is Left content<br/>
<div>
<div class="right-col">
Hello there , This is right content<br/>
Hello there , This is right content<br/>
Hello there , This is right content<br/>
Hello there , This is right content<br/>
</div>
</div>
And here's the CSS :-
.container{
height:100%;
overflow:hidden;
}
.left-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}
.right-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}
Query-
Can somebody explain the working of
padding-bottom:500em (or something)
&
margin-bottom:-500em(Use of negative sign).
The padding-bottom property specifies the width between the element's content and the bottom border, represented by the yellow highlighted area in the illustration below.
Default value is 0, It can be defined in percentage, pixel, pt or em.
The margin-bottom property specifies the width between the element's bottom border and the element's outer edge, represented by the yellow highlighted area in the illustration below
The definitions for units are:
“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance,
if the font-size of the document is 12pt, 1em is equal to 12pt. Ems
are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt,
etc. Ems are becoming increasingly popular in web documents due to
scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to
one dot on the computer screen (the smallest division of your screen’s
resolution). Many web designers use pixel units in web documents in
order to produce a pixel-perfect representation of their site as it is
rendered in the browser. One problem with the pixel unit is that it
does not scale upward for visually-impaired readers or downward to fit
mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to
1/72 of an inch. Points are much like pixels, in that they are
fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current
font-size is equal to 100% (i.e. 12pt = 100%). While using the percent
unit, your text remains fully scalable for mobile devices and for
accessibility.
One nice way to solve this would be to automatically set height of both divisions using jQuery.
For example, let us say you have:
<div class="double_column_left">
//code
</div>
<div class="double_column_right">
//code
</div>
After that retrieve the height of one div '.double_column_right' and apply it to another div ('.double_column_left')'s min-height. Use the following JQuery code:
var divHeight = $('.double_column_right').height();
$('.double_column_right').css('min-height', divHeight+'px');
Try this and let me know if it helps.
I can't comment, thats why I post this as an answer.
I recently had the same problem and found this:
http://codepen.io/micahgodbolt/pen/FgqLc
padding refers to the space within the container. It works from the outside in.
margin refers to the space outwards from that object to the next or the edge of the screen.
For example, if you had a box that is 100px sq. and you gave it a padding-bottom:-20px. Your content inside the box will be 20px away from touching the bottom of the box
If you gave the same box a margin-bottom:20px, anything else you place under the box will always be 20px away from it
I hope that answers your question
Here is the FIDDLE
<div id="wrapper">
<div id="left-col">LEFT</div>
<div id="right-col">RIGHT</div>
<div class="clear">
<p>I HAVE A MARGIN</p>
</div>
<div id="full-row">I HAVE PADDING</div>
</div>
I prefer to ID my containers and CLASS my container elements. That way I can use nesting and target any container I need to modify without creating too many classes. But that is up to you.
I have used this JQuery plugin on a couple of occasions and may work for you, especially as both columns can be the same height based on the columns contents.
It's by Adam Wulf and can be found at http://welcome.totheinter.net/columnizer-jquery-plugin/.
What is the current standard way to handle responsive images in a mobile first approach?
That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.?
Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale.
Exactly, as sanusart wrote you.
For example, if you use Twitter Bootstrap extension (recognized by many as the best or one of the best responsive design-oriented frameworks) and set it to use responsive design (not set, by default), then all you have to do, is to put your image inside responsive container, for example well:
<div class="well">
<img src="img/logo.png" class="img-polaroid" />
</div>
And your image will adapt its dimensions according to screen resolution.
If you would like to separate it with left and right margin,
you can use fluid layout, for example like that:
<div class="well">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"><img src="img/sunflower.jpg" /></div>
<div class="span2"></div>
</div>
</div>
But we aware, that on a wide screens (like phones in portrait mode) your left and right "separators" will be stacked top and bottom, which may produce unwanted side effects.