Resolved Issue with Image Overlapping on Processing.org Examples Page #514 #538
Conversation
✅ Deploy Preview for java-processing-faf822 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
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: 
|
|
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. |
| @@ -1,7 +1,7 @@ | |||
| .root { | |||
| position: fixed; | |||
| top: 130px; | |||
| right: var(--margin); | |||
| right: calc(var(--margin) - 1cm); | |||
There was a problem hiding this comment.
centimeters have not been used yet in the codebase, please use some of the constants in the variables.css
| @@ -42,7 +42,8 @@ | |||
| } | |||
|
|
|||
| .item { | |||
| flex-basis: calc(100% / 5); | |||
| flex: 0 0 calc(25% - 2 * var(--gutter)); | |||
There was a problem hiding this comment.
The fix works, could you research if you could scale the container element instead?
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