JagratiWebApp
JagratiWebApp copied to clipboard
Removed br tags
Related Issue
Fixes: #231
Prosposed Changes
-Removed
tags
- Added margin and padding to the section element.
- Added a section around initiatives
Additional Info
- any additional information or context
Screenshots
Original | Updated |
---|---|
** original screenshot ** | ** updated screenshot ** |
Working on the changes. But I think this CSS is more useful than bootstrap as some classes might cause the view to change like the extra spaces.
Working on the changes. But I think this CSS is more useful than bootstrap as some classes might cause the view to change like the extra spaces.
You can always achieve the required spacing by using some combination of margins and paddings. Anyways, there's no hard and fast rule of keeping the spacing at the current values only (which are quite inconsistent), instead using some consistent margins for all the sections will be better.
Also, the main motive of using CSS frameworks like bootstrap is that we need to write as less custom CSS as possible, so if it can be done using Bootstrap, it should be done using Bootstrap.
I removed the excess css and added 2 classes to donate us section for margin and padding. If there are any other changes required please let me know.
Will push requested changes soon.
@tanishq-arya You've removed most of the
br
tags, but haven't replaced them with appropriate margins due to which the structure of some sections is breaking. Kindly add appropriate margins (using bootstrap's margin classes) to these sections.One more thing to take care is that the links in the navbar (About and Contact) should take the user at the appropriate position. Currently, the heading of the section gets covered by navbar on clicking those links.
I found a solution for the overlapping it was implemented already using the ::before for about us and contact us I increased the size and margin to 65px which is more than nav 63px.
Also I was thinking in mobile view the contact us forms should have some spacing between them should I make a new issue for that ?
I have my end-sem examinations coming up in a few days and the due dates for all my assignments and projects are also approaching, so I may not be active in reviewing PRs for a few days.
No issues. All the best
The spacing of different sections is very inconsistent. Like About Us section has too much space above but very less space (padding) at the bottom of the section. Initiative section hardly has any space at the bottom and then the Donate Us section has too much space at the top.
Also the animations are not working properly on small screen (see animation of Welcome to Jagrati part for instance on a mobile phone, it does not appear in the first frame).
I think there were changes after this too. I'll update the PR.
@garg3133 I found what happened. Earlier the nav was fixed on top so everything was hidden below it. Now the nav collapses so space is left. I'll fix and update the PR.
@garg3133 Can you check now? And I didn't understand about the animation. I didn't change anything related to the animations.
I did that because there was different content in each.
So now I should make all the sections my-3 py-4 ?
I'll remove the donate section
's too.
I did that because there was different content in each.
So now I should make all the sections my-3 py-4 ?
I'll remove the donate section 's too.
@garg3133 any update on this ? What should I do ?
So now I should make all the sections my-3 py-4 ?
I think just the padding should be fine in most cases. You can add the margins if required.
@garg3133 I have added my-3, py-4 to all sections. Also I have added mx-auto to keep every section aligned in center.
Can you take a look at PR #277 it was a small padding fix, and the forms look much better. I have added the screenshots too.