Resolved Issue with Image Overlapping on Processing.org Examples Page #514 by Lavanyaa09 · Pull Request #538 · processing/processing-website · GitHub
Skip to content

Resolved Issue with Image Overlapping on Processing.org Examples Page #514#538

Open
Lavanyaa09 wants to merge 1 commit intoprocessing:mainfrom
Lavanyaa09:resolved-Issue-on-overlapping
Open

Resolved Issue with Image Overlapping on Processing.org Examples Page #514#538
Lavanyaa09 wants to merge 1 commit intoprocessing:mainfrom
Lavanyaa09:resolved-Issue-on-overlapping

Conversation

@Lavanyaa09
Copy link
Copy Markdown

I have observed an issue in example page of processing website where i resolved the issue by using 4 columns instead of 5 at the largest width on the examples page, leaving space on the right.
processingwebsitechanges.pdf

@netlify
Copy link
Copy Markdown

netlify Bot commented Jul 18, 2024

@SableRaf SableRaf requested review from SableRaf and Stefterv July 18, 2024 10:30
@SableRaf
Copy link
Copy Markdown
Collaborator

Thanks for your contribution @Lavanyaa09 ✨ Appreciate you taking the time.

I'm noticing that the changes (right side) are applied globally across breakpoint sizes.

It may actually work a the medium size but it breaks on mobile. See the screenshots below:

image image

@Lavanyaa09
Copy link
Copy Markdown
Author

Hello @SableRaf,

I am pleased to inform you that the updates are now successfully functioning on the web interface globally. I will proceed to work on optimizing the mobile view and will merge the changes accordingly.

Thank you for your guidance and support.

Copy link
Copy Markdown
Member

@Stefterv Stefterv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes work so they could be merged, but I think there might be an opportunity to fix the issue with more sustainable approaches

position: fixed;
top: 130px;
right: var(--margin);
right: calc(var(--margin) - 1cm);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

centimeters have not been used yet in the codebase, please use some of the constants in the variables.css


.item {
flex-basis: calc(100% / 5);
flex: 0 0 calc(25% - 2 * var(--gutter));
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fix works, could you research if you could scale the container element instead?

@SableRaf
Copy link
Copy Markdown
Collaborator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants