Made button appear at new Line in Smartphone View

[Sujal-2820]

Title: Move "Click Me" Button to New Line on Mobile Devices

Overview: This pull request addresses a layout issue on mobile devices where the "Click Me" button was not displaying correctly. The button has been adjusted to move to the next line, ensuring a better user experience on smaller screens.

Changes:

• Added CSS rules for responsive design on mobile devices
• Modified the "btn-about" button styles to ensure it moves to the next line on screens with a width of 450 pixels or less

Approach: I added a media query to the CSS that targets screens with a maximum width of 375 pixels. Within this media query, I adjusted the styles for the "btn-about" button to ensure it displays as a block-level element, causing it to move to the next line on smaller screens while keeping the text in its original position.

Testing Instructions:

1. Open the application on a mobile device or in a responsive mode with a screen width of 375 pixels or less.
2. Navigate to the section where the "Click Me" button is located.
3. Verify that the "Click Me" button now appears on a new line while the text remains in its original position.

Checklist for Reviewers:

• [x] Confirm that the button moves to the next line on mobile devices.
• [x] Ensure that the text positioning remains unchanged.
• [x] Verify that the changes do not affect the layout on larger screens.

[divyanshudhruv]

Cool, will review it

[divyanshudhruv]

Can you send a picture of the button on the mobile screen ? I do not have the device to look into the code at this time.

[Sujal-2820]

Sure @divyanshudhruv. Here are some snippets of the UI for Different dimensions of Smartphones:

For iPhone 12 Pro:

For Samsung Galaxy S8

For Google Pixel

[divyanshudhruv]

Nice, but you can increase the top margin of the button to some extent. Also you may try to adjust the button to right of the text and share a pic. Then we can select which one to keep,the bottom one or the right one.

[Sujal-2820]

Ok 👍 I'll make the necessary changes and get back to you..

[Sujal-2820]

Here are the Updated versions:

1. Increased Top Margin of Button

 

2. Button adjusted to the right of the Text with centrally aligned Words inside Button

[divyanshudhruv]

Can you decrease the padding of button so that the text- click me ,appear on the same line ? Then send a pic here. Good work

[Sujal-2820]

Thanks for the appreciation 🙂 Please review this..

NOTE: As soon as increase the space between the text and the button by even a small px, the button moves to the next line and whole appearance becomes dull

[divyanshudhruv]

Oo, so what do you think, which one is better? Down button or right button ?

[Sujal-2820]

In my opinion the Down Button would be more desirable and soothing to have a look at. This is usually seen in most websites in smartphone view.

[divyanshudhruv]

Here are the Updated versions:

1. Increased Top Margin of Button

 

You mean this one ??

[Sujal-2820]

Yes sir!

[divyanshudhruv]

Ok can you publish you forked repo to gh pages? So that I can see the result ? I currently don't have the device to look into the code

[Sujal-2820]

Ok 👍. I'll notify you once the page is published

[divyanshudhruv]

Ok also send me the link to gh page

[Sujal-2820]

Please review it once link to the page: https://sujal-2820.github.io/Minifolio/

[divyanshudhruv]

Hello, I think you should do something to media query as the width of this tablet is very much but still instead of the button coming to right it is coming down. The down button should only be applicable to mobiles with less width not tablets with more width. Please see to it

[Sujal-2820]

Thanks for the suggestion 💯 I looked upon the issue and solved it accordingly.

Please review it and inform me about any changes needed: https://sujal-2820.github.io/Minifolio/

[divyanshudhruv]

Cool all good. Good job , @Sujal-2820

[divyanshudhruv]

Btw who is main collaborator ? @Sujal-2820 or @Sujal-12345

[Sujal-2820]

Actually @Sujal-2820 is the main account of mine. I have actually connected my github desktop to @Sujal-12345.

But the contribution counts from @Sujal-2820 only 😅

I am glad you liked it. Thanks!

[divyanshudhruv]

Will merge it soon

[Sujal-2820]

Sure 👍 Thank you so much!!

[divyanshudhruv]

Congrats @Sujal-2820

[Sujal-2820]

Wooh!!🚀 Thanks @divyanshudhruv for your support