I have some iframe youtube video on my website. In esponsive view, they are not centered and not full width.
You can see it there:
http://spitzpomeranian.com/fr
Here is the screenshot of my problem
http://prntscr.com/bxn4pe
I tried to edit the css code in jconsole but I couldn't find the solution.
Is there any expert who can tell me how to center and make full width the videos?
You can override width of the iframe in css
iframe{ /*use class or id for the iframe*/
width:100%!important;
height:auto!important;
}
In your case there are some other div that needs to be given 100% width
.resp_video{
width:100%;
}
.wrap_video{
width:100%; /*adjust the margin to make the div fit inside the page without horizontal scrollbar*/
}
You the use above code within your responsive #media query
See Fluid Width YouTube Videos
This solution uses jquery
I think once you have the video going down you can use media query to center them both by making the width 100%.
Related
I know such questions are galore in SO but I do not find a single solution to meet my need fully.
I am using fancybox jQuery plugin to create a thumbnail gallery ( non-responsive version : here- gallery is on the right side ) of images and slideshow as well.
The issue is with the thumbnail gallery - images of varying aspect ratios are uploaded and shown in the thumbnail gallery. The wrapper element (.project_gallery a - inline anchor has been made to display as block) for each image has the dimension 195x195px;
I want the images to stretch to the full of the div and be centered both vertically and horizontally.
In case you need any explanation of the last sentence above, I provide it below:
If the uploaded image has its width smaller then the height, the width should be set to fill the wrapper element fully in the horizontal direction. Even when the image width is resized to be equal to that of the wrapper, image height may not still fill the full height of the wrapper. So the image width still needs to be enlarged maintaining the aspect ratio. At a certain enlargement point, the image height fits the full wrapper height but the image width is then larger than the wrapper width. So the image needs to be placed in center of the wrapper in the horizontal direction. And the left and right side of the image may get cropped i.e: made invisible. The reverse thing should take place if we interchange the height and width of the image in the just-mentioned explanation.
And all those stuff I need to to do in a responsive design way.
EDIT:
HTML mark-up for the image gallery is below.The a element will be many as this is the wrapper of the image and .many images will be there.
<div class="project_gallery">
<a class="fancybox" href="some_href_here" data-fancybox-group="gallery" title="Project"><img src="assets/img/projects/img_name " class="inline_block" alt="image project"/></a>
...
</div>
EDIT2 : The responsive version being devloped is here now.
EDIT 3 : In case you do not like to look into any specific site, you can just consider the full question as below :
Responsive design thumbnail gallery : how to resize and place images with randomly varying aspect ratios in the center of the same sized wrapper divs (img_wrapper) both vertically and horizontally leaving no part of the wrapper unused ? The HTML markup and a bit CSS is below:
HTML:
<div id="gallery">
<div class="img_wrapper"><img src="..." alt="img"/></div>
//the above line will repeat as many images as are there.
</div><!-- end of id gallery-->
CSS:
<style>
#gallery{
width:70%
}
.img_wrapper{
width:25%;
float:left;
}
</style>
See if this helps get you started:
CSS
.fancybox img.inline_block{
margin-left:0 !important;
}
.project_gallery a{
width:100%;
}
.project_right img:first-child{
margin-left:0;
}
.project_gallery a{
width: 100%;
height: 100%;
}
It's possible you might need to add !important or extra selectors to some of these rules so that they will take precidence and overule the exiting defaults.
Regarding the behaviour you want for the background image filling the full div, I think the existing background-image:cover; setting should do what you want. If it doesn't, start by checking that your images are large enough to fill the div.
You mention that you want to do this is responsive way. Your page design doesn't appear to be responsive, for example the image in the top slider is hard coded at 1050px so this would prevent the page from collapsing in a responsive manner. Unless you moved from your existing fancy box plugin to something like a lightbox, I think it could be a challenge to get your existing gallery to be responsive.
Good luck!
I'm trying to change the height of the Twitter feed module you can see here. The layout was done by the vendor we're using for our WCMS, so the CSS is proving a little difficult to navigate. I resized the iFrame for the feed so that it spans two rows, but now when it resizes for phones and tablets it overlaps the "Spotlight" article below it. Here's the CSS. Any help is much appreciated!
Instead of clearing your floats with an extra div using clear:both it's best to get in the practice of clearing your floats in the parent container using overflow:hidden
The interim fix for the problem your having with your twitter iFrame overlapping your "spotlight" article is due to line 3568 in app.css where the max-height is specified. Removing that should fix the issue.
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
Or maybe doing a media query to specify max-height:auto for that element when in tablet or mobile form.
#media only screen and (min-width: 64.063em) {
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
}
The reason you are facing this issue is because the article tag which wraps the iframe has a CSS property max-height:320px attached to it. Due to this, when you view in the mobile view, the article tag does not expand beyond 320px. As the width is also being decreased in the mobile view, the 320px height limitation causes the content to overlap rather than flow below it.
What you can do is override the 320px max height limit with something like this in your media query :
.home-content-modules-row .content-module {
max-height: 1000px;
}
Hope this helps!!!
I am building my own Wordpress theme but i can not get one function to work.
you can se the demo here: www.jonasolaussen.se/hairdesign/wordpress
The big picture can disappears when i set the height to 60%,80% or 100%. It must be
an px width.
The problem is that i want to have the div at 60% so the site works great on big and small screen resolution.
You need to give height: 100% to html and body in your main CSS. After that you will be able to set height in percent to the DIV element.
DEMO - http://jsfiddle.net/yZV2m/1/
Check updated demo and try adding 'clearfix' class to the DIV which is standing at 0px height.
This is a problem with a theme that I bought, and I have already tried to contact the owner (with no luck).
It should be a fairly easy fix, it's just that I can't work out how to do it! (I have done my research).
You can view the theme here: http://igeekify.com/_templates/liftoff/www/
To re-create the problem, just drag the window size so that it is smaller in width than the content, then scroll to the right. You will notice the header background doesn't stretch all the way.
The background image is for the DIV '#frame-header', which has the class '.wrapper'. I believe that the problem has something to do with the width of '.wrapper' which is defined.
Any help is really appreciated!
I think you might need to add a min-width property to the 'frame-header' div:
<style type="text/css">
#frame-header
{
min-width: 940px;
}
</style>
Try using the following code:
image width:100%;
SOLVED
I used the solution proposed by Roman below, based on adding an additional DIV with position:absolute, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!
So the layout now has 3 full background images (what I needed), and even you can use the BODY bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), "three and and a half" bg images with "sticky footer" :)
The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using position:relative to this container.
I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull.
Thank you all for your answers.
http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar
I uploaded
I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the HTML style, one in the BODY style, and the final one in a DIV that it's the container for all the webpage elements (#contenedor)
I'm also sing a "Sticky footer" technique, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.
The problem that I have It's that the BODY bg image gets cut off to the viewport of the web browser, I mean, It doesn't repeat-y below the visible area displayed when the page is loaded, and the contents are "tall" enough to make the webpage scroll.
What I tried until now:
To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).
Force the BODY to be as tall as the HTML using:
html>body {
min-height:100%;
height:auto;
height:100%; }
This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(
You can see a sample:
Index with "small contents" all OK... footer on bottom, etc.
http://carloscabo.com/bg/index.htm
Index page with tall contents (simple BRs), scroll down to see the cut on the BODY bg Image
http://carloscabo.com/bg/index_tall.htm
You can also download all the files of this sample in the following URL to do your own local test.
http://carloscabo.com/bg/stackoverflow_html.zip
For a reason I don't quite catch, it seems that the body is stuck with a height of 100% of the viewport. It refuses to grow past this point, and does not inherit the real height of the whole page.
However, if you don't mind to add another helper div, you can easily solve the problem.
First lets start with the html:
- Add a helper div before the head section.
<div id="contenedor">
<!--HELPER DIV GOES HERE: BACKGROUND FIX-->
<div id="bgfix"></div>
<header id="arriba">
...
</header><!--header#arriba-->
...
<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->
And now let's modify the CSS:
- Remove the background from the body, and put it into the new helper div like so.
body {
height:100%;
min-height:100%
text-align:center;
// background:url(../img/bg_body.png) center top repeat-y;
color:#fff;
}
#contenedor {
position:relative; /* For #bgfix to attach here */
...
}
#bgfix {
background:url(../img/bg_body.png) center top repeat-y;
position: absolute;
width: 100%; height: 100%;
z-index:-1;
}
And VOILA!
Hope it helps!!!
The solution I found for this problem is to set min-height to the
min-height: 900px;
900px was the actual height of the background image i used.
I would need to see exactly what do you want to accomplish in order to help you better,
but i will make my best giving you some tips in advance
you shouldn't be applying a background to the HTML tag.
dont play with the height property of your body, it will mess up the sticky footer, instead let body height grow naturally with content.
body will grow with the content, but html wont. html tag IS NOT a container.