Ck-gatsby-blog icon indicating copy to clipboard operation
Ck-gatsby-blog copied to clipboard

Published 20 hours ago • verified publisher icon Ckbhatia

Fix CSS alignment of social share buttons

Open Ckbhatia opened this issue 4 years ago • 41 comments

Fix social share alignment for following screens

  1. 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

social_share

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

social_share_mobile

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.

Ckbhatia avatar Oct 01 '20 16:10 Ckbhatia

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

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

adsingh14 avatar Oct 01 '20 16:10 adsingh14

Hi @adsingh14

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

Please make sure about firefox too if possible.

Ckbhatia avatar Oct 01 '20 16:10 Ckbhatia

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.

adsingh14 avatar Oct 01 '20 16:10 adsingh14

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: tobe

Ckbhatia avatar Oct 01 '20 16:10 Ckbhatia

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

image

adsingh14 avatar Oct 01 '20 17:10 adsingh14

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

Ckbhatia avatar Oct 01 '20 17:10 Ckbhatia

@adsingh14 Are you working on this?

Ckbhatia avatar Oct 02 '20 11:10 Ckbhatia

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

adsingh14 avatar Oct 02 '20 11:10 adsingh14

@Ckbhatia Can I take this up?

niftyrinki avatar Oct 02 '20 11:10 niftyrinki

@adsingh14 What is the error?

Ckbhatia avatar Oct 02 '20 11:10 Ckbhatia

Have you followed the project setup guide?

Ckbhatia avatar Oct 02 '20 11:10 Ckbhatia

Yes. I followed up Access Locally step from guide.

adsingh14 avatar Oct 02 '20 11:10 adsingh14

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 avatar Oct 02 '20 12:10 adsingh14

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.

adsingh14 avatar Oct 02 '20 12:10 adsingh14

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

Ckbhatia avatar Oct 02 '20 12:10 Ckbhatia

@niftyrinki Have you tried to set up this project?

Ckbhatia avatar Oct 02 '20 12:10 Ckbhatia

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

Ckbhatia avatar Oct 05 '20 05:10 Ckbhatia

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.

sachinttn9663 avatar Oct 05 '20 05:10 sachinttn9663

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

Ckbhatia avatar Oct 05 '20 06:10 Ckbhatia

@Ckbhatia , I'm getting the following error Can you please check Screenshot from 2020-10-05 13-24-07

sachinttn9663 avatar Oct 05 '20 07:10 sachinttn9663

@sachinttn9663 Please use these env variables for development.

CONTENTFUL_SPACE_ID=0dxfiyfxoovv CONTENTFUL_ACCESS_TOKEN=aQ8VH0ajavUGJur3I6LGRTZ

Ckbhatia avatar Oct 05 '20 09:10 Ckbhatia

Still getting error Screenshot from 2020-10-05 22-18-26

sachinttn9663 avatar Oct 05 '20 16:10 sachinttn9663

Please check your internet connectivity and try again.

This kind of error is related to internet connectivity issue.

Ckbhatia avatar Oct 05 '20 17:10 Ckbhatia

I would Like to work on this as well

Hackerbone avatar Oct 06 '20 13:10 Hackerbone

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

Ckbhatia avatar Oct 06 '20 13:10 Ckbhatia

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?

Ckbhatia avatar Sep 10 '21 16:09 Ckbhatia

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

Mukta-Sawant avatar Oct 01 '21 13:10 Mukta-Sawant

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 https://github.com/Ckbhatia/Ck-gatsby-blog/issues/3#issuecomment-932213010, 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.

Ckbhatia avatar Oct 01 '21 13:10 Ckbhatia

can I work on it as well?

ayasahmad7655 avatar Oct 01 '21 13:10 ayasahmad7655

I will improve the social bar in the mobile app.

ayasahmad7655 avatar Oct 01 '21 13:10 ayasahmad7655