I have two 50% width divs. One is simple image and another one is YouTube embed.
What I want to achieve is to have the same height for both elements (image and video). I need that this would work the same on responsive.
I was trying to use http://embedresponsively.com/ css for video embed, but can't understand how to make it work correctly.
Here is what i want to do:
This is my jsfiddle:
<div class="content">
<div class="left">
<img src="http://placehold.it/756x560/2cb7c0/ffffff">
</div>
<div class="right">
<div class='embed-container'><iframe src='https://www.youtube.com/embed/C7dPqrmDWxs' frameborder='0' allowfullscreen></iframe></div>
</div>
</div>
https://jsfiddle.net/ujddekdf/
You won't be able to resize the youtube video, as the proportions of it are set by the provider. The easiest solution is to resize your image to have the same proportion as the video. Then it also works well on the responsive:
<img src="http://placehold.it/756x424/2cb7c0/ffffff">
https://jsfiddle.net/ujddekdf/1/
Related
so I'm having an issue trying to use the Bootstrap reponsive embed classes inside a flexbox.
The classes work fine when things are stacked, but if I then use flexbox to place two divs side by side (one containing the video, the other a panel for text info), the video shifts to half width (which is correct) but the height remains the full height as if it were full width.
Nothing I seem to change is making the height stick to the ratio governed by the width changing from the flexbox.
Is this a bug in the responsive embed?
<div id="youtube-container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'youtube', true); ?>"></iframe>
</div>
<div class="info"></div>
</div>
After a think, it dawned on me that the process BS uses to shift the aspect ratio is based on the parent container.
So after just entering a parent div around the responsive div, it works fine.
<div id="youtube-container">
<div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'youtube', true); ?>"></iframe>
</div>
</div>
<div class="info"></div>
</div>
I have one child div vertically centered under a parent div {parent div has a certain height}. I have assigned the child div with height:100% but it is not taking this property only on safari. Here is a screenshot about the issue.Safari bug
Everything is working fine in chrome and moz but safari. Here is the live version of the website. http://www.ravnapp.com/
Any help will be appreciated, Thank You !
Update: Here is the relevent html code.
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action1.png" width="100%" height="" alt="">
</div>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">TOTAL PRIVACY <br><span class="avenirmedium">AND CONTROL</span></h1>
<p class="desp blenderbook">Ravn is yours to use as you like. Everything is safe and secure and even your notifications are fully disguised. Your privacy is our priority.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">EXHALE, <br><span class="avenirmedium">FINALLY</span></h1>
<p class="desp blenderbook">Ravn is 100% discreet. All your activity is stored within Ravn so you won’t have any surprises popping up in your chat history or camera roll. We’ve got your back.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action2.png" width="100%" height="" alt="">
</div>
</div>
</div>
It looks like the container divs don't actually have a height set on them and they need to have a height before the content can vertically center. since you are going full screen and setting width to 50% and want the height to match.. just add
height: 50vw;
to each container. This will set the height to half the viewport width, which will match the width of the box given your current setup.
You will have to adjust your images to be actually square though as they are a few pixels short.
I have created a Bootstrap carousel, and I am using custom css to define a background image for each of the three slides. For some reason, the background image is not appearing on the first slide, although the background images for slides 2 and 3 are appearing ok. I can't work out what is wrong. I think it may be something to do with the active class being applied just to the first slide?? Here is the HTML and CSS for the first slide, the carousel is called myCarousel, thanks:
HTML:
<!-- class item means item in carousel -->
<div id="slide1" class="item active">
<!--
<img src="http://placehold.it/1200x500">
-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
CSS:
#myCarousel .item { height: 400px; }
<!-- top left is the background position of the image, no repeat because we don't want the background image repeating -->
#slide1 {
background: url('images/carousel_medium_01.jpg') top center no- repeat;
}
Instead of putting your code directly on the <div class="item"> I suggest to make a nested div (replacing the image) and apply a height, width and background-image properties there instead. Like this:
HTML
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="item-custom first"></div>
</div>
<div class="item">
<div class="item-custom second"></div>
</div>
<div class="item active">
<div class="item-custom third"></div>
</div>
</div>
CSS
.item-custom {
height: 100%;
width: 100%;
}
Then for your .first, .second, and .third classes you can add the background-images you want. That should get you going in the right direction. Hope that helps.
The code above is loading the placeholder background image, but it is only visible behind the h1 element due to the lack of the parent #myCarousel div.
The CSS is looking for the parent div on which to apply the explicit height and width.
Try adding the parent div:
<!-- class item means item in carousel -->
<div id="myCarousel">
<div id="slide1" class="item active">
<!--<img src="http://placehold.it/1200x500">-->
<h1>HELLO THERE</h1>
<div class="carousel-caption">
<h4>High Quality Domain Names</h4>
<p>Domains that can help your business marketing</p>
</div> <!-- close carousel-caption -->
</div> <!-- close slide1 -->
</div>
This allows your height/width properties to be applied, and for the background image to display.
Along with crazymatt's suggestion to organize the nested elements a bit more, you can use the background-size and background-position rules to display the image as needed for each individual slide.
jsfiddle example
I have found the solution by ammending the media queries that the site was using. What I had to do was make sure that I had an explicit media query rule to cover all potential screen widths. In the media queries, I specified the background images for the carousel slides. By doing this, I found I always had the background images correctly populated. Previously, for a certain range of screen sizes, I was just letting default CSS define the background images, and this meant the background image for the first slide didn't show. I guess adding media queries for all possible screen sizes meant there was always a "trigger" to populate the background images.
Thanks also to those who offered a reply.
I have a design which is that of rows consisting of two blocks.
http://jsfiddle.net/dhxr25m6/
<div class="homepageBlockRow">
<div class="homepageBlock">
<img src="http://s1059327.instanturl.net/images/HomeTiles/BigJob.jpg" alt="">
</div>
<div class="homepageBlock homepageBlockText orangeBackground" style="height: 372px;">
...
</div>
<div style="clear: both;"></div>
</div>
<div class="homepageBlockRow">
<div class="homepageBlock homepageBlockText greyBackground" style="height: 372px;">
...
</div>
<div class="homepageBlock">
<img src="http://s1059327.instanturl.net/images/HomeTiles/Rental.jpg" alt="">
</div>
<div style="clear: both;"></div>
</div>
The page looks good on a full size monitor but on tablet resolutions the images are about half the height as the text blocks.
I tried scaling up the text block to match the row height, but that doesn't work when the image is smaller.
What would be a good way to scale things so that the images and text are always the same height?
CSS3 has object-fit property that can achieve this (while retaining the aspect ratio).
Just add the following code to the css for the image:
width:100%;
height:100%;
object-fit:cover;
object-position: 0 0;
FYI, I changed the structure of the div definitions a bit and added some height/width/float attributes and you can see a demo here (fiddle doesn't seem to run my code for some reason as mentioned in the comments): object-fit-solution
RESPONSIVE DESIGN:
For mobile devices, you will need to write media queries.
Some pointers for that:
1) make the clearfix div to float to left
2) remove floats on image and text blocks. Also make the width to 100%.
I have a block:
<section id="why">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="img/image.png" alt="image">
</div>
</div>
</div>
.container have a margins of left and right, and i can't position image on left of body.
I need to pull image on left of body, and i need to make it responsive.
it looks like this
Give this a try.
You don't need the container, row or col divs.
<section id="why" class="text-left">
<img src="img/image.png" alt="image">
</section>
To make an img responsive use this:
<img src="..." class="img-responsive" alt="Responsive image">
The .container has a padding of 15px on each side. By using a tool like Chrome Inspector, you can see the styles that each div has.
If not inspector, try removing each div that you have, one at a time and seeing how each one works. The time it took to ask this question, you could have narrowed it down by simply experimenting.
The official website is more than useful, is very well-documented, and it will clear up a lot of things if you take a little bit to read through it.
http://getbootstrap.com/css/
give this a try
<div id="why" class="pull-left">
<img src="..." class="img-responsive">
</div>
you will now have a responsive image. But take note that the class img-responsive by default is display: block. if you want to resize the image, just set the width and height of the image.