Solved: Responsive Design div.subtlecircle Overflow on Small Screens (< 767px) #1367

[VitthalGund]

Description

To solve the overflow problem of div.subtitlecircle, the following CSS has been added:

@media screen and (min-width: 990px) {
  .row .subtitle-icon {
    display: flex;
    flex-wrap: wrap;
    flex-direction: inherit;
  }
}

.subtitle-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  flex-wrap: wrap;
}

.container ol, .container ul { 
  padding: 0 8%; 
  margin: 20px;
}

The .subtitle-icon class is added to the parent element (wrapper) of div.subtlecircle, preventing the element from overflowing and aligning it to the center of the features section. The media query is specifically added to resolve the overflow of the Terminal Fonts subtitle icon without creating a new class or adding specific styling(i have reused the css class which i made for features section). This approach efficiently reuses existing CSS classes.

Requirements / Checklist

• Read the Contributing Guidelines
• I have also test the code locally.
• All necessary checks and test are done.

What does this Pull Request (PR) do?

This PR addresses issue #1367. The issue involved the div.subtlecircle element overflowing its parent container below a width of 767px. The same issue was observed in the Terminal Fonts Examples container, where the div.subtlecircle images also overflowed below this width, leading to a design problem for smaller screen sizes.

How should this be manually tested?

After implementing the solution, I tested this application locally on my machine using Chrome DevTools. I ensured that it works well across various screen sizes.

Screenshots (if appropriate or helpful)

Before:

After:

Before:

After:

(Note: Apologies for not capturing a screenshot of the terminal font section, but I can assure you that it functions correctly. You can verify it as well.)

Fixes: #1367

[Finii]

Thanks for the quick PR!

Unfortunately when I try it I see no change:

left: Chromium, right: Firefox

I did do the Shift-Reload-Butten thing 🤔

[Finii]

Hmm, seems you did not check via jekyll? Somehow the value is not inserted?

[VitthalGund]

Hey @Finii,

Thanks for the review. I actually ran the site locally using jekyll s, and it worked fine in that environment. However, I've identified the issue you mentioned and will make the necessary changes to resolve it.

Best regards,
Vitthal Gund

[VitthalGund]

Hey @Finii,

I wanted to let you know that I've made the necessary changes to address the issue we discussed earlier. You can view the changes on the following link: View Changes.
I've thoroughly tested the changes locally. Please take a look at the link and let me know your thoughts.

Best regards,
Vitthal Gund

[Finii]

This looks great! Thank you ❤️

Maybe a question (I am no web developer), why do you add the . in front of the paths?

-<img src="/assets/img/nerd-fonts-icons-in-vim.png" alt="Preview of Nerd Fonts Icons usage in terminal Vim">
+<img src="./assets/img/nerd-fonts-icons-in-vim.png" alt="Preview of Nerd Fonts Icons usage in terminal Vim">

And maybe you know why the one inner circle becomes so ugly when scaling down, probably some silly simple error on our part:

I guess the circle shrinks horizontally, but not vertically.

[Finii]

@allcontributors please add @VitthalGund for code

[allcontributors]

@Finii

I've put up a pull request to add @VitthalGund! 🎉

[Finii]

(Was unsure if code or design, tell me if you prefer design as contributor tag)

[VitthalGund]

Hey @Finii,

Thanks for considering my Pull Request for merging. I believe the code changes are more valid in this case because addressing the overflow of elements is primarily a coding issue rather than a design one. I've successfully fixed the overflow of the subtitle element in the code, ensuring a more accurate and effective solution.
Furthermore, I appreciate your review and your willingness to merge the changes.

Best regards,
Vitthal Gund

[VitthalGund]

This looks great! Thank you ❤️

Maybe a question (I am no web developer), why do you add the . in front of the paths?

Question

Why do you add the '.' in front of the paths?

I've noticed that in the src attribute of source elements, you add a period ('.') before the path, like this: `./assets/img/nerd-fonts-icons-in-vim.png. Could you explain the reason behind using this period ('.') in paths?

Explanation:

The period ('.') in the path, referred to as a relative path, is used to indicate the current directory. It plays a crucial role in helping the browser locate and access resources correctly. Without it, the browser may not be able to find the resources, leading to issues like images not loading as expected.

So, why use relative paths with the period ('.')? It's because they provide a way to specify the path relative to the current location of the HTML file. This can make it easier to manage resources, especially when organizing files in a directory structure.

[VitthalGund]

-<img src="/assets/img/nerd-fonts-icons-in-vim.png" alt="Preview of Nerd Fonts Icons usage in terminal Vim">
+<img src="./assets/img/nerd-fonts-icons-in-vim.png" alt="Preview of Nerd Fonts Icons usage in terminal Vim">

And maybe you know why the one inner circle becomes so ugly when scaling down, probably some silly simple error on our part:

I guess the circle shrinks horizontally, but not vertically.

Hey @Finii,
You're right about the inner circle. I've checked it, and I believe I can address the issue if you allow me to do so. It might indeed be due to a typo in the CSS width attribute.

Additionally, I plan to enhance the styling of the cards on the website. While I'm not familiar with some technologies, I'm committed to learning and contributing.

Your guidance is valuable, and I'm dedicated to making a meaningful impact on "nerd-fonts."

Feel free to share any specific focus areas or suggestions.

[Finii]

You're right about the inner circle. I've checked it, and I believe I can address the issue if you allow me to do so. It might indeed be due to a typo in the CSS width attribute.

Of course, I would be happy if you can attack that.

Additionally, I plan to enhance the styling of the cards on the website. While I'm not familiar with some technologies, I'm committed to learning and contributing.

Enhancing the style is of course good; but what someone calls 'enhance' someone else calls 'make worse'.
Maybe you can describe beforehand what specifically that means, before you invest time and work. Someone else mentioned 'add hover effects to make the site more modern' and I must admit that I'm not really thrilled by hover effects usually. The target audience is 'nerds' and they tend to see website design a bit different than 'usual web surfer'; but then, maybe not :-D