In this tutorial we are going to understand how to create a full width responsive background
image to a particular container, and in this context we will know how
to create media query in an extent to fit your contents in different or various display
device width.
[music]
Hello and welcome to another new episode of learning simplified.
In this tutorial the first thing we are going to know is how to create a responsive full
width background image of a container and in this
respect we will be knowing how to make those media queries such that the contents fit into
any device, into any width, any display device width.
A couple of days ago Mr. Rohit from New Delhi made such query to us and In response to that
query, we are particularly presenting this tutorial to you.
It is the very effective one so stay tuned to our tutorial and watch the video till the
end.
Let me Express you that in this context we have created a new .HTML page which is known
as full-width-background.HTML.
We are practically using HTML5 documentation over here and we have linked bootstrap.min.css
to this HTML page and in this respect we have linked bootstrap.min.js to this page.
So for the page will be looking like this one.
If we now move into our custom.css we can see I have set the background color of this
HTML page as #000, so there's nothing problem with it.
I am going to create a new .banner10 class.
Now in this particular case as I am using a background image, hence I won't be providing
any kind of background color over here.
Else I will be jumping straight into importing some kind of background image to this HTML
page.
This is the folder that contains the image so the first thing all I need to do, I need
to take this folder name over here and then I need to copy this file name.
So I am getting back to this I have clicked into
this folder and inside it there is a sample .JPG.
All I need to do we need to just copy this filename along with its
extension name over here, and paste it here.
In this purpose I would like to say that this image will be non-repeating in nature.
So I am placing here no-repeat option and I am keeping the image at the top
position, that means the image will be showing full of its features over here.
And another thing, I am setting the background-size as cover.
Now another thing, this is practically a testing purpose that this div is working properly,
so what I am doing here I am just using a height.
This is not advised to use any kind of height property in bootstrap element as we are totally
unaware of the height of the content, but for the testing
purpose we are practically imposing the height over here.
Now let's get back to full-width -background.HTML and inside this page...
This time I am using container-fluid instead of container.
Practically I am not restricting our content to be kept within a 1200px container, as a
whole device width will be covered here so that is why I am selecting this container-fluid,
which will be covering the hundred percent width of the device and along with this div
class, I am using another div, which is known as banner10, that
we have created over here.
So here it is.
Now let's have a check on it that we have created so far.
So I am getting back to Browser, and I am pressing reload.
There is no sign of it.
Here it is.
So instead of background-image, use here this background property.
Now we can see that our div is ok and it has been tested and all these things are coming
through and it's quite well in its position.
Now let's concentrate into the rest of the coding.
Now we have created this banner10, its ok over here, we are now removing this height
and instead of this height we are now creating the
banner10 h2 over here.
now I am getting back to full-width-background.HTML and here inside this col-lg-12, I am placing
this thing, h2.
Now Press control+S, get back to your project and reload, and now you
can see that this world hello world is no practically been imposed over here, it is
now appearing into your screen.
Now another thing that we have to create over here is... instead of padding-top, we are
providing a padding- bottom of 20%.
Then come back to your .HTML page and just beneath this h2, we are now providing
this class h3.
Press control + s, get back to your project and reload.
Now you can see that hello world is the first thing
and the second thing is how are you.
You may change this content to this one, that may seem to be quite a larger one.
So all these things are coming together and coming fine.
Now, we can see over here get this image is practically getting a full-width version.
As we can witness that this thing is working quite well with larger desktop
preview, but what if we now switch on to mobile responsive preview and press Control + shift
+ m in this context and you can see that all those things are coming
quite well inside your preview.
But if you want to make these things, come these things into a single line, then all
the remaining thing that you need to do over here is to reduce the size up to a certain
preview or up to a dimension.
On the other hand if you just reduce the size here, inside this custom .CSS, press
control + s, get back to your project and reload.
And you can see that it is OK for this device dimension, perhaps it is OK too for this device
dimension, but in case of a desktop preview, you can see that
these words are really too small, way too small to be properly viewed in case of large
desktop devices.
That is why we need to make such amendments such as these
words will be small when it is viewed in a smaller device, but it will be in a bigger
font size when it is view in a larger desktop preview.
So what to be done over here?
That is why we will be requiring a special type of css Syntax which is known as @ media
query.
Now practically if we import this thing @ media query over here,
provide a space now you have to specify, you may specify a min-width, oh you may specify
a max width.
So first of all we are specifying a max width of 767px.
When the HTML page will detect the media width
is 767px, then it will..
First of all change this original values over here, we are making this amendment somewhere
else.
We can see that in normal preview the font size is 5 em.
Just press control + S, get back to your project and reload.
Now you can see that the normal media preview is 5em and 3 em respectively.
But in case, when the media will be detecting as a max width of 767px, then under that condition,
the font size of banner10 h2 will be 5em, not 5em actually 3em, and in the same
manner for h3, this size will be reduced to 1 em.
Now just press Control + s, get back to your project and reload, now you can see that in
a larger desktop preview, there's practically no change in this font size
property.
Now if you just enter into your mobile responsive view, now you can see the font size is reduced
to 3 em and the h3 element,the h3 header tag here is
reduced to 1 em as we can observe over here.
Rotate the view, same thing is happening here.
No place here up to 767px.
Now you can see here that up to 767px, those header tags, those are representing a font
size of 3em and 1em respectively.
But whenever this media device width is greater than 767px, now you can see that the
original font size is now back into action.
Now let's suppose that we want get up to 767px, banner10 h2 will execute a font size of 3em,
then from 768px to, for say 1199px, this Banner10 h2 will be executing a
font size of 4em and the font-size of h3 will be 2 em in that case and beyond 1199px, original
font-sizes will be restored which is 5em and 3em respectively.
So, if you want to make this kind of amendment, then
you need to specify some particularity over here.
You need to copy this code again, paste it over here, and here you
should change this max-width to min-width, which is 768px and here you need to specify
-- this thing should be 4em as we told you earlier.
And font-size in this case will be 2em.
Now if we press 'ctrl + s' and get back to our project, now we can see that the font-size
is a little-bit of increased, as we have mentioned over here.
Now checking this condition.
Place here 320px.
And here we can see that the H2 font size it is practically executing a 3em, this H3
tag over here, it is practically executing a font size of 1em.
In case of 640px, same thing will be continued over here.
In case of 767px, checking, same thing will be executed over here as we can see.
But whenever we are now changing this value to 768px, now we can see
that this font-size is a little bit of enhanced.
And beyond this thing that means whenever we are now getting back to
our normal preview we can see that the original font sizes are being restored.
So this is the power of @media query.
Hence we are now defining the particular attribute or properties for particular dimension.
So these are the things that you can do here with this media query.
Creating another div.
I am practically using banner9 along with this container so getting back to custom.css
getting back to this full-width background hTML, first
of all create the rest of these things here...
There it goes on now we can see that this is the first container which is in action
and this is the second container that is in action, that everything is now
working perfectly.
So we have successfully employed a full-width background image for a particular container
which is also responsible and the font size and all the elements inside,
their properties can be altered with the aid of @ media query as we have seen over here.
Here it is, at the responsive preview.
A margin top of 2em has been employed and that is why this margin is being
executed over here.
It can be observed in the normal preview as we can see over here and we have used the
container class, the container fluid and that is why
it is executing at 1200px container over here.
Everything and the rest of the things are remaining the same.
So this is what we had to know in this tutorial.
Hope this tutorial will be helping you in Creating your own responsive previews and
in understanding the @media query in case of Bootstrap responsiveness.
So this is the thing that we have to learn from this tutorial.
If you have liked this tutorial then please do not hesitate to hit that
red subscribe button.
Hope to see you guys in the next tutorial.
Till then, bye.
[music]
Quantum Binary Signals
Trả lờiXóaGet professional trading signals sent to your cell phone daily.
Follow our signals right now & gain up to 270% a day.