The advantage of open-source contributions is barely explored by a huge amount of community. The last thing that schools want us to know is solving things individually, taking problems at an individual level. And certainly is not true at all. The actual problem solving happens by collaboration, solving other's problems, and exploring our own bugs by letting others solve our problems.
I was working on a web development project where I forget to specify an important section in the Html file, which is called the meta-viewport section. Now to explain meta-viewport in brief I shall tell you that meta-viewport tag is always preferred to be included in all HTML files of almost all websites you see on the internet because what it does is, it actually helps the structure of the content in the HTML file to be flexible in all devices like Phones, laptops, PCs, tablets, etc.
So if you write a code, for making an HTML file for a website, better add a meta-viewport tag first as all professional web developers prefer to do.
Now, in this whole talk, I am making it clear, there was no error in my code because of not specifying the meta-viewport tag. But the important role here for meta is, it got blamed by me because I thought the problem was erupting because of the addition of meta tag.
So to understand the problem, one thing I would like to make clear to all newbie web developers is about the CSS style property which you add in any element is a style property that applies to that element with respect to what element contains that element tag.
For example: You wrote a basic Html Code:
So here in this image, you can see I have given a class jimmy to a div tag which is inside body tag/element. So now, it means that if you give any CSS property to div class = "jimmy" this property will be with respect to body tag.
Another more complex structure for example:
Here, There is body inside which is div class jimmy inside which is div class taravia. So, now if we apply any CSS property to div class taravia then this property will be with respect to di class jimmy. And similarly, property applied on div class jimmy will be with respect to body tag.
And so, what happened is I applied all necessary properties to all tags, although the original Project was complex than the shown above code, but still, it is a good analogy to explain here. So I forgot to apply an important CSS property to div class jimmy which means that the properties that I wrote for div class taravia were also not implemented.
To be precise, I forgot to write justify-content: center; property to div class jimmy. What was expected to be done, is a div class jimmy container to be at the center of the body and div class taravia to be in the center of the div class jimmy.
So, when I forgot to write justify-content: center; in div class jimmy, and wrote justify-content: center; in div class taravia. what happened is the div class taravia extended itself farther away than the body area itself in Phone view. So there will be a strip-line which will dull the view of your website, which looks very poor and is not preferred by anyone to refer it on the internet, even the internet itself will not refer this type of un-structured website.
It is sad, that right now, I am not having the screenshot of that distorted structure of the website. But if I get it, I will definitely share that in the coming Blogs.
The reason I wrote this, Importance of Open Source contribution and Github, is because this problem which I faced was solved by one of my Friends Nirbhay Parmar (Another Web-dev enthusiast) who pointed me out the bug with a proper solution to it.
So in brief: in a picture format given below, for keeping the "div class=jimmy" in the center of the body, we have to write "justify-content: center;" in the CSS property of "div class=jimmy", AND to keep "div class=taravia" in the center of the "div class=jimmy" container, we have to write the same "justify-content: center;" in the CSS property of "div class=taravia".
What I really made mistake is: I did not mentioned "justify-content: center;" in div class=jimmy , but I mentioned "justify-content: center;" in div class=taravia. So what happens is the "div class=taravia" container applies the property with respect to "div class=jimmy", but the container "jimmy" is not at the center as we forget to write the center property to it. So given below figure shall clarify your doubt, about the property.
This is how your structure will look if you don't write properties according to the rules of CSS.
Check out Nirbhay Parmar's Blog ( @nirbhayparmar ), if you are interested in web development, open-source, and problem-solving.
Top comments (0)