Fix CSS alignment of social share buttons #3

Ckbhatia · 2020-10-01T16:06:20Z

Fix social share alignment for following screens

The social share position should not break when the article text isn't enough ( Desktop screen ).

You can refer to this for the issue or see image below: https://chetanblog.netlify.app/blog/introToGit

It should not overlap the heading below it ( Mobile screen: width 414):

Note: please work on your fork with some dummy article data to reproduce the same issue on your local machine.

Please don't hesitate to ask for help if needed.

adsingh14 · 2020-10-01T16:14:32Z

I can help you with this. Just started working on it. Before starting, I have some questions:

In screenshot 1, do you want to fix the position of social icons ?
Are you using Chrome browser for this website ?

Ckbhatia · 2020-10-01T16:32:49Z

Hi @adsingh14

I want to fix positions of social icons.
Yes, these screenshots are from chrome.

Please make sure about firefox too if possible.

adsingh14 · 2020-10-01T16:33:48Z

IRT point 1. Do you want to keep the icons under stats text and on screen all the time?

No problem about firefox. I'm Firefox user.

Ckbhatia · 2020-10-01T16:49:34Z

Hello @adsingh14

Can you achieve this? ( Optional )

Author profile and social icons should be aligned well with the cover image of the article like this:

adsingh14 · 2020-10-01T17:24:40Z

Yes ! Does the icons and profile side remains fix on tablets and desktop ? (Take a look at the attachment)

Ckbhatia · 2020-10-01T17:47:23Z

No, It is not fixed. I want you to fix like this.

Ckbhatia · 2020-10-02T11:03:38Z

@adsingh14 Are you working on this?

adsingh14 · 2020-10-02T11:13:20Z

Project isn't running on local. I've run yarn command and it stuck on step 2.

niftyrinki · 2020-10-02T11:21:54Z

@Ckbhatia Can I take this up?

Ckbhatia · 2020-10-02T11:47:17Z

@adsingh14 What is the error?

Ckbhatia · 2020-10-02T11:49:19Z

Have you followed the project setup guide?

adsingh14 · 2020-10-02T11:49:38Z

Yes. I followed up Access Locally step from guide.

adsingh14 · 2020-10-02T12:06:26Z

In the guide you've marked contentful step optional but it asks about .env.production.

Error: Failed to find .env file at path: .env.production

adsingh14 · 2020-10-02T12:27:23Z

I skip this issue from my side. I can do CSS thing but incomplete guide stops me doing this. You can assign this to anyone.

Ckbhatia · 2020-10-02T12:30:46Z

Can you please create .env.production and paste the same env variables?

Ckbhatia · 2020-10-02T12:40:55Z

@niftyrinki Have you tried to set up this project?

Ckbhatia · 2020-10-05T05:18:22Z

Please feel free to pick this issue as no one else picked it yet

sachinttn9663 · 2020-10-05T05:47:00Z

Please feel free to pick this issue as no one else picked it yet

@Ckbhatia PLease assign it to me, want to work on it.

Ckbhatia · 2020-10-05T06:41:16Z

@sachinttn9663 I am glad to see your interest to work on this issue. I will be happy to see your PR for this issue.

sachinttn9663 · 2020-10-05T07:55:01Z

@Ckbhatia , I'm getting the following error Can you please check

Ckbhatia · 2020-10-05T09:04:29Z

@sachinttn9663 Please use these env variables for development.

CONTENTFUL_SPACE_ID=0dxfiyfxoovv
CONTENTFUL_ACCESS_TOKEN=aQ8VH0ajavUGJur3I6LGRTZ

sachinttn9663 · 2020-10-05T16:49:19Z

Still getting error

Ckbhatia · 2020-10-05T17:25:36Z

Please check your internet connectivity and try again.

This kind of error is related to internet connectivity issue.

Hackerbone · 2020-10-06T13:19:09Z

I would Like to work on this as well

Ckbhatia · 2020-10-06T13:50:55Z

@Hackerbone Please go ahead. I would love to see your PR.

Ckbhatia · 2021-09-10T16:58:17Z

Hi @Hackerbone, Do you have any updates on this issue?

If not, Can you please work on it and raise PR before the upcoming HactoberFest, So I can close issues?

Mukta-Sawant · 2021-10-01T13:09:10Z

@Ckbhatia Can I work on this as a part of Hacktoberfest 2021?

Ckbhatia · 2021-10-01T13:31:31Z

Go ahead 👍

…

On Fri, 1 Oct 2021 at 18:39, Mukta Sawant ***@***.***> wrote: @Ckbhatia <https://github.com/Ckbhatia> Can I work on this as a part of Hacktoberfest 2021? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI2SGUKJIJUPZDQHQMG4SD3UEWXIDANCNFSM4SAT74MA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

ayasahmad7655 · 2021-10-01T13:45:10Z

can I work on it as well?

ayasahmad7655 · 2021-10-01T13:46:58Z

I will improve the social bar in the mobile app.

Ckbhatia · 2021-10-04T03:42:24Z

@Mukta-Sawant Any update?

Mukta-Sawant · 2021-10-04T04:24:48Z

@Ckbhatia sir I need help in setting up the project locally.

Ckbhatia · 2021-10-04T04:40:05Z

Please check discord

…

On Mon, 4 Oct 2021 at 09:55, Mukta Sawant ***@***.***> wrote: @Ckbhatia <https://github.com/Ckbhatia> sir I need help in setting up the project locally. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI2SGUPF6FBMVSTQFRUX4ITUFEUBZANCNFSM4SAT74MA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

adsingh14 · 2021-10-09T18:24:26Z

Hi @Ckbhatia ! I would like to work on this. Shall I wait to get assigned ?

Ckbhatia · 2021-10-10T01:16:05Z

Hi Aman, No there's no need to wait for assigning the issue. I will assign to you. Yeah, you can update the package in your PR. I will accept it. Thanks

…

On Sun, 10 Oct, 2021, 12:52 am Amandeep Singh, ***@***.***> wrote: [image: error image] <https://user-images.githubusercontent.com/35252877/136671459-29a1424e-e741-45e5-bffc-b87b4f1388ed.png> Can you please update *node-sass* package. Although, terminal informed about the old npm packages are in use. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI2SGUKIN6A2ME2XO742O5TUGCJBBANCNFSM4SAT74MA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

adsingh14 · 2021-10-10T04:37:54Z

Have you updated components\Mode.js in your system? That file also needs to update. Apart from that, I've updated the node-sass package but still getting webpack error.

Ckbhatia · 2021-10-10T04:59:57Z

No component isn't updated. I have an m1 mac. There are some dependency issues on this system. So, I need to dockerize to run it.

adsingh14 · 2021-10-10T05:06:23Z

It'd be great if you add docker commands in this repo, if that solves the issue.

Ckbhatia · 2021-10-10T05:53:13Z

On most other system, it doesn't need docker.

Erum640 · 2022-10-06T17:12:43Z

Please assign me this issue i want to work on it

Ckbhatia added enhancement New feature or request good first issue Good for newcomers hacktoberfest up-for-grabs Developer can start working on issues that are labeled up for grabs labels Oct 1, 2020

This comment has been minimized.

Sign in to view

Ckbhatia assigned adsingh14 Oct 10, 2021

Ckbhatia removed the up-for-grabs Developer can start working on issues that are labeled up for grabs label Oct 10, 2021

adsingh14 mentioned this issue Oct 11, 2021

Fix CSS alignment of social share buttons #35

Open

Fix CSS alignment of social share buttons #3

Fix CSS alignment of social share buttons #3

Comments

Ckbhatia commented Oct 1, 2020

Fix social share alignment for following screens

adsingh14 commented Oct 1, 2020

Ckbhatia commented Oct 1, 2020

adsingh14 commented Oct 1, 2020 • edited Loading

Ckbhatia commented Oct 1, 2020 • edited Loading

adsingh14 commented Oct 1, 2020

Ckbhatia commented Oct 1, 2020

Ckbhatia commented Oct 2, 2020

adsingh14 commented Oct 2, 2020

niftyrinki commented Oct 2, 2020 • edited Loading

Ckbhatia commented Oct 2, 2020

Ckbhatia commented Oct 2, 2020

adsingh14 commented Oct 2, 2020 • edited Loading

adsingh14 commented Oct 2, 2020

adsingh14 commented Oct 2, 2020

Ckbhatia commented Oct 2, 2020

Ckbhatia commented Oct 2, 2020 • edited Loading

Ckbhatia commented Oct 5, 2020

sachinttn9663 commented Oct 5, 2020

Ckbhatia commented Oct 5, 2020 • edited Loading

sachinttn9663 commented Oct 5, 2020

Ckbhatia commented Oct 5, 2020

sachinttn9663 commented Oct 5, 2020

Ckbhatia commented Oct 5, 2020

Hackerbone commented Oct 6, 2020

Ckbhatia commented Oct 6, 2020

Ckbhatia commented Sep 10, 2021 • edited Loading

Mukta-Sawant commented Oct 1, 2021

Ckbhatia commented Oct 1, 2021 via email

ayasahmad7655 commented Oct 1, 2021

ayasahmad7655 commented Oct 1, 2021

Ckbhatia commented Oct 4, 2021

Mukta-Sawant commented Oct 4, 2021

Ckbhatia commented Oct 4, 2021 via email

adsingh14 commented Oct 9, 2021

This comment has been minimized.

Ckbhatia commented Oct 10, 2021 via email

adsingh14 commented Oct 10, 2021 • edited Loading

Ckbhatia commented Oct 10, 2021

adsingh14 commented Oct 10, 2021

Ckbhatia commented Oct 10, 2021

Erum640 commented Oct 6, 2022

adsingh14 commented Oct 1, 2020 •

edited

Loading

Ckbhatia commented Oct 1, 2020 •

edited

Loading

niftyrinki commented Oct 2, 2020 •

edited

Loading

adsingh14 commented Oct 2, 2020 •

edited

Loading

Ckbhatia commented Oct 2, 2020 •

edited

Loading

Ckbhatia commented Oct 5, 2020 •

edited

Loading

Ckbhatia commented Sep 10, 2021 •

edited

Loading

adsingh14 commented Oct 10, 2021 •

edited

Loading