Conda-forge.github.io: Homepage not responsive in mobile view

[Aaishpra]

• [x] I read the conda-forge documentation and could not find the solution for my problem there.

Issue:
The homepage is not responsive in smaller screens/mobile view.
Check below screenshots

[Aaishpra]

@viniciusdc there is a similar problem in the blog section but at the footer instead of navbar.
I was confused about where to open the issue for it here or in conda-forge/blog

[beckermr]

This works fine on my iphone. are you sure?

[Aaishpra]

Yupp, checked on my phone too

[Aaishpra]

@viniciusdc also mentioned it here

[beckermr]

It is responding fine in my brower as I resize the screen and on my phone. I can reproduce the issue you posted only when using the browser inspection to resize the screen and not resizing the actual window.

[Aaishpra]

This is what is see on my phone when i open the homepage

[Aaishpra]

It is responding fine in my brower as I resize the screen and on my phone. I can reproduce the issue you posted only when using the browser inspection to resize the screen and not resizing the actual window.

Try a little bit scrolling to the right when you open it on phone, the navbar menu is present at the rightmost corner.

[viniciusdc]

It is responding fine in my brower as I resize the screen and on my phone. I can reproduce the issue you posted only when using the browser inspection to resize the screen and not resizing the actual window.

Try a little bit scrolling to the right when you open it on phone, the navbar menu is present at the rightmost corner.

Yes, same behaviour here too.

[BastianZim]

I think this comes from the NUMFOCUS graphic:

It's only there though if I zoom out on my phone or scroll to the right.

[viniciusdc]

I think this comes from the NUMFOCUS graphic:

It's only there though if I zoom out on my phone or scroll to the right.

oh great point, I do agree with you that it might be the culprit. I think that the next step is deciding if we can do a dynamic resize of that logo.

[BastianZim]

Maybe something like so:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_responsive2
https://www.w3schools.com/howto/howto_css_image_responsive.asp

[Martins-O-U]

@viniciusdc Outreachy Applicant here. Please I'd like to work on documenting this issue. Kindly assign the task to me and confirm I can go ahead.

[Aaishpra]

@Martins-O-U i am already working here, although if you want we can collaborate.

[Martins-O-U]

@Aaishpra yes, that would be great. I'd love to collaborate with you.

[Aaishpra]

Sure, @Martins-O-U
@viniciusdc can you assign both of us here. I have started looking into the issue 😄

[Martins-O-U]

Thank you @viniciusdc

[Aaishpra]

Thanks for your comment @BastianZim I have solved this issue, basically, the problem was arising because the NUMFocus logo and the youtube video were not responsive.

[Aaishpra]

@Martins-O-U basically what I did was add a class in index.html.tmpl named responsive to both logo and the Youtube video,
and add some custom css in ../css/theme.css
Here are the code snippet of what I did

• Add responsive class in line 149 of index.html.tmpl

<iframe width="560" class="responsive" height="315" src="https://www.youtube.com/embed/EWh-BtdYE7M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

• and same class in line 250 of the same file

<img src="img/NumFocus_LRG.png" class="responsive" alt="Numfocus Logo" />

• and here is the code of what I added in theme.css

.responsive {
    max-width: 100%;
    height: auto;
  }

Since we both were working on this issue you can go forward and make a PR for this with the code I provided, just add me as coauthors in the description of the PR.
and as @viniciusdc already has said the PR can be counted as both of our contributions.

[Aaishpra]

Adding screenshots for confirming

[Martins-O-U]

awesome @Aaishpra, I am on it

[Martins-O-U]

Fix completed, and a Pull Request has been raised. https://github.com/conda-forge/conda-forge.github.io/pull/1392

[viniciusdc]

closing this issue as #1392 solved it! :tada: