Responsiveness issue

[kunalcoder45]

Description of the bug/issue

I found several responsiveness issues on your website and blog website.

First, on your main website (https://nightwatchjs.org/):

1. In mobile view, the footer section is not well-aligned. If all the elements are properly center-aligned, it will improve the user experience.
2. The 'Substack' text at the bottom is not properly aligned, and the social icons are very large, which disrupts the user experience.
3. In the bottom section, the social icons are not properly center-aligned, which is negatively affecting the user experience.

Second, in tablet mode:

1. The text size of columns like "Features," "Resources," "Docs," and "Nightwatch" in the footer is too large.
2. In such cases, the layout should adapt to a 2x2 column format, with "Features" and "Resources" aligned horizontally at the top, and "Docs" and "Nightwatch" aligned horizontally below them for a better user experience.

Third, on your blog page (https://nightwatchjs.org/blog):

1. The icons in the footer section are too large.
2. Additionally, sections like "About," "Newsletter," and "Help" should be center-aligned to maintain consistency and enhance user experience."

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Sample test

No response

Command to run

No response

Verbose Output

No response

Nightwatch Configuration

No response

Nightwatch.js Version

3.9.0

Node Version

No response

Browser

No response

Operating System

No response

Additional Information

No response

[Thanush19]

@kunalcoder45 ,hii.. i can work on it...

[kunalcoder45]

Yeah sure @Thanush19

[Thanush19]

Hey @kunalcoder45 , I’m facing an issue replicating and running the UI on my local machine. Can you help me set it up?

[sixmachine-6]

i am unable to clone the project i am getting the error...
please guide me then i can create a PR

but here is the solution
for the image 1

@media (max-width: 480px) {
.footer__wrapper-inner-social {
display: inherit;
flex: inherit;
}
}

remove the display inherit property and further add

@media (max-width: 1024px) {
.footer__wrapper-inner-social {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
}

.footer__wrapper-inner-social-subscribe {
padding-top: 32px;
}

.footer__wrapper-inner-social-links svg {
width: 90%;
height: 100%;
font-size: 10px;
}

add these properties