Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive Footer #86

Closed
wants to merge 1 commit into from
Closed

Responsive Footer #86

wants to merge 1 commit into from

Conversation

anushruti11
Copy link
Contributor

@anushruti11 anushruti11 commented Jun 16, 2021

Description

The footer is now responsive for bigger screens as well.

Fixes #84

  • Bugs
  • New Feature
  • Documentation

How Has This Been Tested?

On live server

Checklist:

  • My PR follows the style guidelines of this project
  • I have performed a self-review of my own code or materials
  • I have commented my code or provided relevant documentation, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • New and existing unit tests pass locally with my changes

Screenshot (1049)

@netlify
Copy link

netlify bot commented Jun 16, 2021

✔️ Deploy Preview for launchspacex ready!

🔨 Explore the source changes: 81749db

🔍 Inspect the deploy log: https://app.netlify.com/sites/launchspacex/deploys/60c9920afbf6bc000716fc91

😎 Browse the preview: https://deploy-preview-86--launchspacex.netlify.app

@manankohlii
Copy link
Owner

Hello @anushruti11 this needs work, you have just fixed the footer, it should not overlap the main content and appear only when scrolled down to the bottom.
Screenshot (11)

@anushruti11
Copy link
Contributor Author

anushruti11 commented Jun 16, 2021

Hello @anushruti11 this needs work, you have just fixed the footer, it should not overlap the main content and appear only when scrolled down to the bottom.
Screenshot (11)

@manankohlii Please guide me over this. Which CSS attribute should be used here for a responsive footer in screens like iPad. Although, it is responsive in the other alternatives, but for iPad screen only sticky footer works.

@anushruti11
Copy link
Contributor Author

@manankohlii I need your guidance.

@manankohlii
Copy link
Owner

@anushruti11 waiting for mentors to be assigned to this project, you may get in touch with them. Otherwise you always have YouTube.

@anushruti11
Copy link
Contributor Author

@shivamsingh124 can you guide me over this ?

@shivamsingh124
Copy link

https://stackoverflow.com/questions/54646939/why-is-my-positionsticky-not-working-on-ios
You should check this once if you still need any kind of guidance let me know.

@anushruti11
Copy link
Contributor Author

https://stackoverflow.com/questions/54646939/why-is-my-positionsticky-not-working-on-ios
You should check this once if you still need any kind of guidance let me know.

@shivamsingh124 I tried this but it isn't working. The footer is still not responsive for iPad screen.

@shivamsingh124
Copy link

Please share the deployed link I'll check it.

@anushruti11
Copy link
Contributor Author

anushruti11 commented Jul 23, 2021

Please share the deployed link I'll check it.

https://anushruti11.github.io/spacex-launch-data/
@shivamsingh124

@anushruti11
Copy link
Contributor Author

@shivamsingh124 Any updates?

@shivamsingh124
Copy link

Yes,
The link you gave at the time of submission and that you provided me 11 days ago are not the same (was expected to be ) previously you used fixed position so it got struck for whole page then use used sticky.
Reason it got delayed.
use Sticky providing offset from Top accordingly.
you can also achieve this with assigning value to bottom using js when it got scrolled to the bottom.
Screenshot (1155)

@shivamsingh124
Copy link

P.S. If you haven't got your answer then do describe your problem in a documented form.

@anushruti11
Copy link
Contributor Author

Yes,
The link you gave at the time of submission and that you provided me 11 days ago are not the same (was expected to be ) previously you used fixed position so it got struck for whole page then use used sticky.
Reason it got delayed.
use Sticky providing offset from Top accordingly.
you can also achieve this with assigning value to bottom using js when it got scrolled to the bottom.
Screenshot (1155)

@shivamsingh124 could you please share the deployed link of this output?

@shivamsingh124
Copy link

Haven't deployed nor saved have just changed code on inspect element.
Follow the steps mentioned to get the same output.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make footer responsive
3 participants