Add background color in main container, Increase the size of ACM in navbar and Improve responsiveness of the page

[anujji1999]

For #93

I would like to suggest that the main container of all cards should be give a background color, so as to make it look more appealing.

Also, in the navbar the size of ACM should be increased, because IGDTU here denote the section, so, they both shouldn't have same size.

And i think the page should be made responsive for mobile devices as well. Although this page adapts to displays of smaller size or resolution but on mobile phone the page looks very bad. We should instead make one item show up below another on mobile devices. That will make a perfect sense.

This is how it looks on mobile :

If we add a media query, the one item can be displayed in each row i.e. every item can be stacked one below another. After making suggested changes, page will look like this :

I think, this will be more cleaner UI for mobile devices.

[soumyaa1804]

@anujji1999, that was a really good observation but I would say the webpage is responsive. It just requires a reload when the window size is reduced.

[anujji1999]

@soumyaa1804 Ohh great. Btw, why does it require a refresh? Can we modify it such that it can automatically change it's layout when the screen size is changed?

[anujji1999]

Also, in the navbar the size of ACM should be increased, because IGDTU here denote the section, so, they both shouldn't have same size.

[anujji1999]

Also, i would like to suggest that the main container of all cards should be give a background color, so as to make it look more appealing.

[lisa761]

Hi, @anujji1999, You can edit your description and add all the suggestions there itself. And please edit it to include the for #93 and change your title.

[lisa761]

And about refreshing for responsiveness, maybe you could look it up? Although a way to solve this would be to add an automatic refresh using javascript when there is a window resize.

[anujji1999]

@lisa761 , is it fine now?

[lisa761]

Great! Its good that you have tested it so much! So, I don't think that changing size of ACM and IGDTUW is a good idea because the page is for ACM-IGDTUW. As in, it has nothing to do with ACM on its own. And what did you use to see how the page looks on a mobile? I use the chrome developer tools for it, and this is what it looks like for me:

I have also once hosted this site on heroku and checked on my phone, and it looks okay. Although, when resizing the browser on your laptop, you do have to refresh it to see it respond to the new size. But for devices like phone and tablets, you wouldn't have to refresh as it detects the screen-size and then renders the page. So what I mean is that, if you open it on a phone or a tab, it will look like what you see in this screenshot without refreshing. Although, I do agree that when on laptop, resizing the browser shouldn't require a refresh for it to be responsive and therefore I think we could add a javascript event that would listen for resize events. We can discuss more if you have thought of any other way. Are you familiar with web development?

Also, changing the color could be a good idea. It would require some testing on your part for which color suits over-all, but it could be a good idea.

[anujji1999]

Actually, i checked by resizing my Chrome Window. But, yes it should automatically render the page in correct format. Your idea of adding an event is also a good hack. But, if we want to handle this in right manner i guess Media Query is the perfect option(as per my knowledge). PS - I am a beginner in Web development, just started two weeks back, but ya i have decent knowledge of Android.

And, i will check for best color options.

[lisa761]

The current implementation uses javascript to add and remove classes on appropriate sizes. That is the reason it is required to refresh when the page size changes, because the size is checked only once in the beginning and never again. Using media-queries to implement this should be doable and solve this issue. Great work! If you need help later on, feel free to ask :)