http://developers.facebook.com/docs/reference/plugins/comments/
This is how I generate the comments area after including the Facebook javascript SDK on the page:
<div class="fb-comments fb-comments-update" data-href="http://site.com" data-width="600" data-colorscheme="light" data-num-posts="10" data-order-by="social" data-mobile="auto-detect"></div>
As you can see facebook sets the width of the comments area based on this data attribute you give it:
data-width="600"
In this case I am telling facebook I want the area to be 600 pixels. But I am currenly building a responsive site and need the comments section to fit the width of the screen 100%. Doing none of these works:
data-width="100"
data-width="100%"
Is there any way to get a fluid width for facebook comments?
Try this code:
<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
</style>
First size is for devices smaller then 1200px and bigger then 979px. The only problem is with IE sometimes, but you can use something like that: width: 1200px\9; - IE 8 and above
This sample is from bootstrap, which I'm using very often. To use it you need less win version. But this code works in aby browser (except old IE).
.fb-comments { width: 490px; /* or width: 50%; */ }
/* Large desktop */
#media (min-width: 1200px) {
.fb-comments { width: 600px; /* or width: 50%; */ }
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
.fb-comments { width: 400px; /* or width: 50%; */ }
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.fb-comments { width: 30px; /* or width: 50%; */ }
}
/* Landscape phones and down */
#media (max-width: 480px) {
.fb-comments { width: 200px; /* or width: 50%; */ }
}
Also try to use percentage, not pixels, even with padding, for example:
.fb-comments { width: 90%; height: auto; padding: 0 5%; }
Related
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/* Small */
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
I tend to use containers everywhere To middle content in different devices and keep it balanced (media) like min-width 1200px {width: 1200px}etc. However when I try to style a site that begins from the edges. it comes in the middle which does not help in these kinds of sites.
what should I do?
If you are going to say get rid of containers, I do not know how to work without them Can you tell me what to do instead of the containers that I tend to use?
How to handle Banner image responsive for different devices like small and medium mobile and tablet.?
Width:
.banner
{
max-width: 100%;
height: auto;
}
Media Query:
#media only screen and (min-width: 960px) {
.banner
{
width: 960px
height: auto;
}
#media only screen and (min-width: 1440px) {
.banner
{
width: 1440px
height: auto;
}
}
#media only screen and (min-width: 2000px) {
.banner
{
width: 2000px
height: auto;
}
}
#media only screen and (max-device-width: 480px) {
.banner
{
width: 480px
height: auto;
}
}
#media only screen and (device-width: 768px) {
.banner
{
width: 768px
height: auto;
}
}
You can use bootstrap framework. add img-responsive class to image
<img src="1.jpg" class="img-responsive" alt="image" >
It also depeds on your image, does the main content of your image occupies all the space?, is there anything you can cut? if that's the case, you can achieve it with object-fit, object-position, and the width and height will not vary too much.
If you can modify by yourself the image, use the img srcset property, where you designate which image should be displayed in different resolution breakpoints.
If none of previous options suits you, try with vmax, you'll have fun guessing the right measures, but once that it's done, you won't need too much media queries
Finally, there's the tedious way, setting various media queries.
I have modal that displays images. I set height of image in modal on 90% and width automaticly scales with it, so image is not stretched. But on the mobile phone I want the height to not be defined and I want to define only width to 100%. How do I make height of the image on small screen not defined? till now I have this code:
.image {
height: 80%;
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
/* make height not defined?!
}
}
Use height: auto; in mobile screens.
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
I have the following code inside a media query (from Bootstrap):
#media (min-width: 768px) {
.col-sm-9 {
float: left;
width: 75%;
}
}
When resizing the window between 768px and 992px, the width of my column is always 562.5px. The width of wrapping div with the row class is always 750px. Why is that? I always thought that specifying width in percent meant that the width of our element will always be 75%. For example, when window is 992px wide it would be 744px wide and when window is 768px wide it would be 576px wide.
Am I missing something?
That is because bootstrap's own rule set the container to a fixed width, which also is not the same as its min-width rule value.
/* bootstrap rules */
#media (min-width: 768px) {
.container {
width: 750px; /* 75% of 750px = 562.5px */
}
}
#media (min-width: 992px) {
.container {
width: 970px; /* 75% of 970px = 727.5px */
}
}
If you want it to change while resizing the viewport, you could like this
Fiddle demo
#media (min-width: 768px) {
.col-sm-9 {
width: 75%;
}
.container {
width: 100%;
}
}
#media (min-width: 992px) {
.container {
width: 100%;
}
}
Or, if you want it to be fluid all the time, simply change the container class to container-fluid
Fiddle demo
I have got a Bootstrap carousel with 3 images (480x320px). Width of carousel itself set to 480px. How to scale carousel when you resize browser size?
.carousel{
width: 480px;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
Thanks!
You need to make the width of your .carousel class as 100%..
You need to make the below change to your CSS,
.carousel{
width: 100%;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
However if you want keep them at 480x320px initially and want to handle them while the browser is getting resized, then you will need to go for media queries.
/* For devices which are smaller than 960 pixels */
#media only screen and (max-width: 959px) {
//Write your CSS here.
}
/* For Tablets */
#media only screen and (min-width: 768px) and (max-width: 959px) {
//Write your CSS here.
}
/* For all mobiles */
#media only screen and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Landscape Size to Tablet Portrait */
#media only screen and (min-width: 480px) and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
//Write your CSS here.
}
Hope this helps!
It's possible that a simple width:100%; on the css, and apply img-responsive to it may fix it.
Let me know!