Bootstrap Add CSS media queries to your facebook feed on your Bootstrap or HTML5 website


Hi Guys this is Jamie from http://www.system22.net and http://www.great-webdesign.com/ welcome to this video this is just a short follow-up video
from yesterday we created this Facebook feed little element right here and when
we were starting it looks fine I’m quite happy with it but I checked it on a
smaller phone last night on an iPhone 5 I believe it was and it kind of spills
off the side so what we’re going to do in this video is add some media queries
of a few options of what we can do about this I’ll show you exactly what I mean
if I hit the inspector f12 there and go into responsive mode let’s have a look
at it on an iPhone 6 on a 6 you see teams spilling just off the side there a
little bit I mean it looked ok on the phone that I checked it on all my 5 it’s
way over there I mean that’s seeing really the end of the screen size of a 5
there if we go into a responsive mode see it starts to spill over there about let’s get it down say 400 probably as
large as we want to see there that’s the width up there 400 and that’s the hike
right there so an iphone 6 iphone 6 is 375 so anything under 400 I think we
even want to make this disappear or make it smaller so let’s go ahead and do that
I’ll show you exactly how in this we’re using our bracket editor which is a free
download from brackets dot IO for anybody that doesn’t have it again I’ll
put a link below so if we open our brackets and have a look at our
index.html for this site this is what we were working on
yesterday this is the iframe that we put in there so I’m going to give the
container that it’s in here an extra class I’m just going to call it FB for
one of anything else clean through the FB we’ve put in there now now if I go
ahead and say that and we’ll go to our style.css and we need to add a media
query down the bottom here and so let’s add where we say 400 wasn’t it so if we
add a media query we want screen and and then we want max width of 400 we say and
I think what I’ll show you first is that the easiest option which is just to have
it not display at all on screens smaller than a certain size so that class we
created with FB so if I’ve been taught FB and then we can simply put in there
display:none and save that and then back to our site and do a refresh obviously
now if we inspect it f12 button again and let’s get into responsive mo work
375 let’s make that responsive okay 490 good so if we go down should
still be there – it’s still there 490 we start sliding it once a doctor for 400
below 400 it should disappear there we are it’s gone
so that’s a very easy option – to stop that problem on smaller phones just just
get rid of that element I mean it’s it’s very easy to do now if you decide well I
kind of like that element I want to keep it there on smaller phones you know I
like people to see my facebook page well that’s not a problem either if we go
back to our style.css let me just comment this out so it doesn’t work
anymore and this time let’s put in we’ll put in that class and if we look back at
our index there’s our class FB and below that
iframe so we want FB iframe to point it to that particular element there so
we’ll give FB I frame now we just need to add wit to say 275 that should do it
we’ll try that anyway okay we’ll save that and go back to our website quick
refresh so 571 now when we go to the anything below 400 up here this should
shrink to a width of 275 so let’s try that
there we are is it 413 and 401 and we drop down there
is it shrunk to a little skinnier size there that will work on all
our iPhone size and smaller so just check it out on a5 here we are we can
reposition it if we need to but that actually fits on fine okay let’s go in and just fix this all
we’re going to do is reduce the padding on this side so this is a little more
central here look a little bit better there so if we go back to our style dot
CSS file select add another bit of CSS you the same section all we’re going to
do is tell it have padding left to zero at below 400 so we’re at below 400 here
with this media query and so we’ll say padding like zero picks and click see
and back to our site and a refreshening should pull it over a little bit there
there we go and that’s made it more central which’ll which looks a lot
better so there you go that’s two ways of dealing with that particular problem
I hope that’s been helpful to you once again this has been Jamie at system 22
and great web design comm thanks for watching and have a great day bye you

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *