When we want to insert a Facebook like box, we're given auto-generated code to insert into our website.
Unfortunately, the width of the like box is hard baked into the code:
<div class="fb-like-box" data-href="https://www.facebook.com/bibandtucker.net.au" data-width="450" data-colorscheme="light" data-show-faces="false" data-width="300" data-header="true" data-stream="true" data-show-border="false"></div>
How can I make the Facebook like box responsive, so that it will reduce in width to accommodate content areas less than the hard coded width value?
You can see the problem on this website. Watch what happens when you reduce the width of the view port.
You can make it fluid by doing this (googled for it):
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
width: 100% !important;
min-width: 200px;
}
You can make it responsive by finding where it starts messing up the layout:
#media (max-width:1100px) {
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
width: 100% !important;
min-width: 200px;
}
}
Since it's an iframe that you don't control, you can't style it further.
Demo: http://jsbin.com/mehil/1
This no longer works as of 2015 -- facebook has updated their code so that there is a minimum width of 180px.
to get around this you have to use JS.
in this case, .facebook-likebox is the wrapper (which is dynamically being scaled in relation to other elements), and .fb-page is the container for the iframe. the code is cross browser.
here is my code snippit:
facebookScale = function () {
var adjustWidth;
adjustWidth = $('.facebook-likebox').width() / 180;
return $('.fb-page').css({
'-webkit-transform': 'scale(' + adjustWidth + ')',
'-moz-transform': 'scale(' + adjustWidth + ')',
'transform': 'scale(' + adjustWidth + ')'
});
}
$(function(){
$(window).on('resize', facebookScale);
})
EDIT: also make sure the following is in your CSS:
.fb-page{
transform-origin: 0 0;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
}
Edit 2: facebook seems to have updated the widget to now have a min width of 180. so the code has been updated to reflect that. the widget should resize to fit the width of your container otherwise
<div class="fb-wrap">
<div class="fb-like-box" data-href="http://www.facebook.com/#"
data-width="100%" data-height="#"
data-show-faces="true" data-stream="false" data-header="false"></div>
</div>
.fb-wrap {
padding-top: 10px; width:90%; margin: 0 auto;}
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style]
{width: 100% !important; }
This works perfectly for me
this works for me with show faces true
.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style]
{max-width: 100% !important;}
Related
Thanks in advance for your help.
I need to ensure even vertical spacing between DIVS containing a checkbox + a labels inside a form -- even when the page is resized. The problem I'm having is that the labels are different lengths, so when the page is resized, the spacing between the DIVS is consistent, but I want the spacing to be even between the end of one label (which may be up to 3 lines long), and the start of the next.
I was reading about flexbox, and hoped this would be an appropriate method to handle. But it's not working as I expected, perhaps because I'm doing it wrong. Or perhaps because I'm using the checkbox hack for custom checkboxes, and that is interfering?
Here's my code:
CSS:
/* CUSTOM CHECKBOX CONTROLS */
input[type=checkbox].css-checkbox {
position:absolute;
z-index:-1000;
left:-1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
padding-left:19px;
height:14px;
display:inline-block;
line-height:14px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:16px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
background-position: 0 -14px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_15092a7494cee0a8cdfe5f1e21e1e816.png);
-webkit-touch-callout: none; 212 247 8100
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* FLEXBOX CONTROLS */
.flex-container {
display:flex;
flex-direction:column;
height:450px;
align-items:baseline;
}
.flex-item {
margin:auto;
margin-left:0px;
flex-basis:0;
flex-shrink:1;
height:auto;
min-height:50px;
}
HTML:
<div class="flex-container">
<div class="flex-item"><input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
<label for="checkboxG4" class="css-label radGroup1"><p>News, Commentary, Research & Special Reports</p></label>
</div>
<div class="flex-item"><input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" />
<label for="checkboxG5" class="css-label radGroup1"><p>Get General Research that includes periodic Special Reports sent when a landmark market event occurs.</p></label>
</div>
</div>
sorry if this is answer is late but maybe this can still help you. Looking at the JFiddle link you provided here: Your JFiddle, the reason this is not working is because you have set the height of your labels to a fixed height of 14px (to work with the checkbox feature you implemented). You correctly set justify-content: space-around to do what you described, but if the content is always 14px regardless of how many lines it spans, then the space will remain the same no matter what. Since your checkbox feature requires this 14px height, you should instead apply this checkbox feature to a div nested inside the label, with the accompanying text outside this div, but still inside the label. Here is a JFiddle with the code I implemented to get this working.
The main HTML change is this:
<label for="checkboxG4" class="radGroup1">
<div class="css-label"></div>
<span>News, Commentary, Research & Special Reports</span>
</label>
instead of:
<label for="checkboxG4" class="css-label radGroup1">
<p>News, Commentary, Research & Special Reports</p>
</label>
and CSS changed to:
input[type=checkbox].css-checkbox + label div.css-label,
input[type=checkbox].css-checkbox + label div.css-label.clr {}
label div.css-label {}
instead of:
input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr {}
label.css-label {}
How would i come across the effect from this website http://www.theqcamera.com or http://plugandplaydesign.co.uk (the video + image at top) so that the image fills the screen on any screen size. Im not sure if this is responsive height but really would like to know how to do it.
There are a few ways to do this. The easiest is to use vh (vertical height) in your CSS. A setting of 100vh will make your div be 100% of the height of the screen being used to view the page. Combine this with a background image that is set to "cover" and a 100% width on the domain and you should be good to go.
<body>
<div class="container">
<div class="div_1">
content
</div>
<div class="div_2">
other content
</div>
</div>
</body>
.div_1 {
width: 100%;
height: 100vh;
}
.div_2 {
width: 100%;
height: auto;
}
Please note: vh is not supported in IE8. If you need to support IE8 for your project, going with position:absolute; height:100%; width:100%; margin: 0; is a slightly more complicated, but more backwards compatible answer.
try using height 100% , position absolute , margin 0 auto
this is how I've made my picture 100% on my website (http://www.dotto.be)
How can I changed the height of md-toolbar in material design?
http://jsfiddle.net/kostonstyle/gsroofa5/
On the first toolbar I want a height from 30px and tried that:
<md-toolbar style:"height: 30px;">
But it does not work at all. I need a navbar with two bulks, that because of two toolbar.
I try this, but now letter disappear.
http://jsfiddle.net/kostonstyle/r178sp9o/1/
You can use an inline style like this
<md-toolbar style="min-height:30px">
Use min-height to make the toolbar smaller
The height of the toolbar can be changed by adding the classes to the md-toolbar.
For a medium sized toolbar add class="md-medium-tall"
For toolbar bigger than the normal add class="md-tall"
You can also inline style the toolbar style="height:50px;"
The accepted answer did not work for me. Here is how I got it working in my Angular Material app:
<mat-toolbar color="primary"
style="min-height: 30px !important; height: 30px !important;">
This worked for me on Angular 8. Put this code in your scss
.mat-toolbar {
min-height: 50px !important;
height: 50px !important;
}
.mat-toolbar-row {
min-height: 50px !important;
height: 50px !important;
}
Replace 'mat' with 'md'
If just setting the min-height doesn't work, like it didn't work for me, you will also have to add in max-height with the same value:
HTML
<md-toolbar class="toolbar"></md-toolbar>
CSS
.toolbar {
max-height: 30px;
min-height: 30px;
}
I'm pulling my hair here. Trying to come up with a simple responsive layout where two fluid boxes are aligned next to each other. The main box must always be centered in the browser window, while the other should be aligned beside it in its top right corner. See example image below -
Tried different approaches involving negative percentages and three-column faux layouts but it just doesn't work.
Demo: http://dabblet.com/gist/7201560
Markup:
<div class='container'>
<div class='main-col'></div>
<div class='right-col'></div>
</div>
CSS:
.container {
text-align: center;
}
.main-col, .right-col {
display: inline-block;
vertical-align: top;
text-align: left;
margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}
.main-col {
width: 50%;
margin-left: 20%; /* equal to .right-col's width */
}
.right-col {
width: 20%;
}
What's happening here:
The centered main column and right column have display: inline-block, and they're centered in the viewport by giving their container text-align: center. They're still not centered the way you want though. Since they're sibling elements you can use margin to push the main column to the left with a value equal to right-column's width, essentially centering itself.
Hi you can check my try in this link http://jsfiddle.net/WHq8U/17/.
I had to use a little jquery to calculate the sidebar absolute position. Let me know your opinion about this.
We have a solution utilizing JavaScript, but I'm also curious if there is a way to do this with pure CSS?
The Situation
I'm relatively new to responsive design, and in the past have stuck with positioning, etc to achieve my layouts. I'm attempting to create a simple responsive header that resizes in a specific way.
My Dilemma
The header is a 29px high bar at the top of the page, with 29x29 buttons at either end. In the middle, bordering the button on the right, is a div (for page titles) that I want to have a min width of 300, but I also want it to expand with the browser width.
Here is the catch: I want this title div to pull away from the left button, leaving a gap of a max-width of 200px. Once the max-width of the gap is reached, I would like the title div to start expanding, staying pressed up against the right button. See as follows.
note: I've created a jsfiddle here for experimenting
I've modified your JSFiddle and added a bit of JavaScript to get the effect I think you're looking for. There are also comments to walk you through exactly what the JS code is trying to accomplish.
Essentially, I'm binding a handler to the window.resize event, calculating the available space in the header, and adding or subtracting from the title container to maintain its width.
Okay well here is what I have so far. WILL EDIT in the morning (kind of tired)
I feel this is definitely possible but it does require javascript. The fact that you want there to be a 200px space available requires javascript or some sort of programming to tell the styling to do that.
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<div id="container">
<header>
<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
</header>
</div>
</body>
<script>
if (parseInt(document.getElementById("div2").clientWidth) >= 200) {
document.getElementById("div2").style.width = "200px";
}
</script>
</html>
So the way I went about it is rather than having 3 divs, I made 4 -- the original 3 you had, but then the white space you want to consider as, well open space, I made a div for that as well. I also have javascript so that when the window scales past a width of 200px, it will lock it at that width. Unfortunately, I'm not super polished with my CSS yet so I'm still trying to figure a way to get that working. If anyone wants to edit my answer, please feel free.
Another thing to point out is that while the javascript does working for if the nav is growing, it doesn't for shrinking. I didn't implement a way for it to be able to shrink if say the user decided to shrink his window size because I have it set to lock the width at 200px (I guess a way to work around that would be with an } else { clientWidth = "100%"? Not sure. Hope this gets you on the right track though.