opensourcedesign.github.io icon indicating copy to clipboard operation
opensourcedesign.github.io copied to clipboard

Updated index.html 'Become a sponsor' image object

Open sparsh-99 opened this issue 4 years ago ā€¢ 9 comments

Fixes #285

Styled an image object by reducing its width as it is left-indent a bit.

  • Change its width from 150 to 140 to align it in the center.

sparsh-99 avatar Jun 16 '20 11:06 sparsh-99

@sparsh-99 I inspected your update in chrome browser by doing the same change that you have made and I found that it has added some extra space over the image!!!

Screenshots -->

Before changing the width

Before

After changing the width

After

stygian-96 avatar Jul 16 '20 08:07 stygian-96

@stygian-96 The problem is in mobile view, the left margin is somewhat to the left. I only changed that.

sparsh-99 avatar Jul 16 '20 20:07 sparsh-99

@stygian-96 The problem is in mobile view, the left margin is somewhat to the left. I only changed that.

@sparsh-99 I inspected it in the mobile view too and I faced the same issue, it is adding some extra space on the top of the image.

Screenshots -->

Before : Before-2

After : After-2

stygian-96 avatar Jul 17 '20 01:07 stygian-96

I think you did some mistake, I inspect my changes once again. I think, I good to go for the PR.

Screenshots:-

Screenshot (64)

Screenshot (65)

sparsh-99 avatar Jul 19 '20 16:07 sparsh-99

Iā€™m a bit confused, as the current https://opensourcedesign.net does already have the width set to 140px ā€“ but that actually seems to cause the issue with the misalignment for me?

jancborchardt avatar Nov 05 '20 09:11 jancborchardt

Iā€™m a bit confused, as the current https://opensourcedesign.net does already have the width set to 140px ā€“ but that actually seems to cause the issue with the misalignment for me?

@jancborchardt The width 140px is set to of that "<image" tag but what I am proposing is the change in the width of the "<object" tag from 150px to 140px which not only aligning the button but also shrinking the extra space between the next paragraph.

  1. What you are looking for is this:-

Screenshot (175)

  1. and What I am proposing in the index.html file is this:-

Screenshot (176)

Are you getting the point @jancborchardt ?

sparsh-99 avatar Nov 05 '20 10:11 sparsh-99

Not sure if this needs another look by someone who has better understanding of the changes but the PR is quite old now!

Erioldoesdesign avatar Jun 17 '21 10:06 Erioldoesdesign

Unless someone stops me, I'm going to close this PR without merging - especially since we're doing lots of redesign work on the website

Erioldoesdesign avatar Jul 19 '21 11:07 Erioldoesdesign

@jancborchardt take another look maybe?

Erioldoesdesign avatar Sep 13 '22 12:09 Erioldoesdesign

@SaptakS should we merge this or close do you think?

Erioldoesdesign avatar Nov 01 '23 23:11 Erioldoesdesign

@Erioldoesdesign this branch has conflicts that need to be resolved. Also, I think I am not happy with the solution. The width of the image is always calculated based on the height (since aspect ratio). Fixing the width works but is finicky and should be fixed as an attribute on our codeside in the <object> element with a width attribute equal to the width of the image (i.e. 140px). So might be easier to close this PR and create a new one.

cc @sparsh-99

SaptakS avatar Nov 02 '23 08:11 SaptakS

Closing this PR and it can be referenced in a new PR if someone else works on a similar issue

Erioldoesdesign avatar Nov 02 '23 11:11 Erioldoesdesign