Devlog 2.0

Today i am planning to make important change in the website. I found that, the website is looking bad and not working the UI properly in mobile screens.

So i decided to make the website responsive and dynamic in mobile screens also as well as the desktop screens

So let start to design the whole webpage again!

Devlog 2.1 | Frame 1 - 5

First of all i made some research about making a webpage into a responsive one, and i found that we can simply edit the layout of the element according to screen width using @media function in CSS file. So i found that the maximum width of a mobile screen is 480px. So decided to adjust the @media function with screen width 480px.

In frame 1, i doesn’t made any changes for the mobile screen.

But in frame 2 i found that it doesn’t align the text exact that of the center of the screen height and width. And also find that the text typing animation is the issue regarding that! So i tried my maximum to solve that but unfortunately i couldn’t, So i decided to remove the animation in the mobile screen.

In frame 3, Then i moved into next frame. I made the main div into 100% width and height that of the screen. Also made the input box into a little smaller than that of the 100% width. Similarly also changed the width of the button.

In frame 4, I made everything exactly center to the whole screen. by making the layout position as absolute and then made top and left as 50% move.

Solving Bugs and logical errors. I found a bug in the animation period on the mobile screen. It has been working perfectly until the animation between frames 3 & 4. I found that the fade-out animation of frame 3 is working perfectly but the fade-in animation of frame 4 is working but placing the frame at the very bottom-right side. After a huge think i created a id tag for a this special animation issue which has the issue for these two frames only. Then i connected them using JS now its working perfectly.