http://developers.facebook.com/docs/reference/plugins/comments/
It says there that:
The mobile version will automatically show up when a mobile device
user agent is detected. You can turn this behavior off by setting the
mobile parameter to false. Please note: the mobile version ignores the
width parameter, and instead has a fluid width of 100% in order to
resize well in portrait/landscape switching situations. You may need
to adjust your CSS for your mobile site to take advantage of this
behavior. If preferred, you can still control the width via a
container element.
But when I visit my page on the iphone, although I see the "mobile design" of the Facebook Comments, the width of the box is the one I set on the code.
My test page: http://www.santiagosarceda.com/facebook/
This is my code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="fb-comments" data-href="http://www.site.com/3953172" data-num-posts="5" data-width="300"></div>
</body>
</html>
The box allways renders at 300px width.
Is there any problem with Facebook Comments itself? Because a few days ago everything was working ok.
Thanks for reading!
The Facebook Comments generates inline style that has changed and the following CSS seemed to override the inline SPAN CSS for me to make Facebook Comments Fluid Width
.fb-comments, .fb-comments span[style], .fb-comments iframe[style] {width: 100% !important;}
I hope this works for you.
Related
So I'm having an issue where my site has a lot of padding on the right side, making the layout load incorrectly. It appears correctly in on my desktop when the window is resized, but everything other than the header breaks when viewed on my phone. All of the relevant divs are set to a width of 480px, and I have the following tag in my header for the media query:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here are screenshots of how it appears on desktop and mobile, as well as a link to my mobile css page (the menu is open on mobile, but the extra space seems to affect it as well).
CSS Page
Edit: I'm now having a slightly different issue, where the margin has been added to the entire right side of the screen. I changed the pixel widths for many of the divs to 100%, as well as adding the <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> tag to the header. While they can no longer zoom out, you can just scroll the screen horizontally to find the padding. I'm also having an issue with my font-face tag, which no longer loads the header fonts. I updated the css file, so hopefully that shows why it won't work anymore.
Also, here's a link to the live site: Link
You shouldn't be setting explicit widths here, (at least not in pixels anyway) and from a brief glance at what you've posted I'd imagine that's where your issue lies.
Firstly, take off the widths that you've set for anything that you intend on being "full width" - remember divs are block-level elements anyway, so if you don't set a width at all, they'll have a width of 100%.
Secondly, take off any other pixel widths you're setting and change them to be percentages instead.
Thirdly, you'll save yourself a lot of headaches if you set 'box-sizing' to 'border-box' (I'd recommend just doing it on '*' for simplicity). This will prevent your padding and margin from being added on top of any widths you set as percentages; they'll be included in the box sizing instead.
Finally, I can't stress enough how important it is to get out of the mindset of things like "mobile" and "desktop". All we're talking about here is different viewport sizes. :)
If you have a live link you can share I'd be more than happy to have a proper look at this.
Add the following to your .css file:
img{max-width:100% !important}
This is what it looks like on my tablet:
When I inspect remotely in chrome, I see that the body width(600px) is not that of the document, being set by a div with a min-width:1000px;.
How can i get the bootstrap navbar to fill the full width?
You can access the website suphearst.ca
the solution is too simple
just add min-width:1000px; to body
It sounds to me that you are missing the viewport meta tag in your html document. It will fix your problem and render the document after the device scale.
<meta name="viewport" content="width=device-width, initial-scale=1">
You can read more about it here
I've a page with a sidebar setup with bootstrap. When I reduce the width of the page in my browser, the sidebar goes from FULL -> COLLAPSED -> TOPBAR (meant for small screens like phones) as the width decreased
But strangely when I access this in my phone, I only see the COLLAPSED version of the sidebar whereas on that small a screen I should be seeing the TOPBAR.
I can't understand how to debug this since it works correctly in my PCs browser on reducing the width!
Any wise CSS heads here who might know what the problem might be? You can check out the sample page here.
Please add below meta tag to recognizance device without this tag this responsive design not work in mobile : Add between <head> tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I made a website template with divs used for background images which should fill the whole width. It works on common web browsers on Mac / PC but not on iPad and iPhone Safari. Here is a link to the template:
http://www.ivo-fahrzeugtechnik.de/neu/template.html
I put a red border on the part I mean. There you can see that the div is not filling the whole width. Is this normal? How can I fix this? I did not found anything about this problem online.
Ok I've found the same problem (had to search for "iOS" not "iPad / iPhone"): iPad background for div blocks not spanning entire width of screen
My solution was to set the min-width of body and all elements, which where to small, to 1024px!
If you can't find any solution, use javascript for dynamically sizing the div :
(function(){
$('yourdiv').css('width', $(window).width());
})();
It is not the most pretty solution but I hope this will work, let me know if you need more support !
Try to use meta tags with viewport for iOS devices like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
I think it's fix your problem.
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.