search

opensourcedesign / opensourcedesign.github.io

🎨💻 Source code of our website
https://opensourcedesign.net
Apache License 2.0
347 stars 186 forks source link

Updated index.html 'Become a sponsor' image object #290

Closed sparsh-99 closed 10 months ago

sparsh-99 commented 4 years ago

Fixes #285

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

stygian-96 commented 4 years ago

@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

sparsh-99 commented 4 years ago

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

stygian-96 commented 4 years ago

@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

sparsh-99 commented 4 years ago

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)

jancborchardt commented 3 years ago

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?

sparsh-99 commented 3 years ago

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 ?

Erioldoesdesign commented 3 years ago

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

Erioldoesdesign commented 3 years ago

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 commented 1 year ago

@jancborchardt take another look maybe?

Erioldoesdesign commented 10 months ago

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

SaptakS commented 10 months ago

@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

Erioldoesdesign commented 10 months ago

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