Skip to content

add max-width to images on learnign-paths #6411

@Touriist

Description

@Touriist
Contributor

Current Behavior

The chapters in the learning paths have some humongous images, simply because they take up the full width of the container (width: 100%).

Image

Desired Situation

  • add a max-width

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

Join the Layer5 Community by submitting your community member form.

Activity

Jivi-this-side

Jivi-this-side commented on Apr 29, 2025

@Jivi-this-side

Greetings, @Touriist ! Based on the issue mentioned, I believe the necessary changes should be made here:

img{
height: 8.5rem;
width: 8.5rem;
}

Specifically, the following adjustments are required:

            max-width: 100%; { to Add max-width }
            object-fit: contain; { Ensures proper image scaling }

Please let me know if my understanding is accurate. I would be delighted to contribute and work on resolving this issue.

Thank you! 🌻

vr-varad

vr-varad commented on Apr 29, 2025

@vr-varad
Contributor

Sure! @Jivi-this-side LGTM

Jivi-this-side

Jivi-this-side commented on Apr 29, 2025

@Jivi-this-side

Greeetings, @vr-varad ! I have submitted the pull request for your review. I kindly request your valuable time to assess the proposed changes.

Thank you for your attention and consideration. I sincerely appreciate the opportunity to contribute. Wishing you a wonderful day ahead!
Thank you ! 🌻

stale

stale commented on Jun 27, 2025

@stale

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

added
issue/staleIssue has not had any activity for an extended period of time
on Jun 27, 2025
HIMU-2001

HIMU-2001 commented on Jun 28, 2025

@HIMU-2001

hello @Touriist @vr-varad ,

Could I take up this issue.

removed
issue/staleIssue has not had any activity for an extended period of time
on Jun 28, 2025
stale

stale commented on Jul 19, 2025

@stale

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

added
issue/staleIssue has not had any activity for an extended period of time
on Jul 19, 2025
vr-varad

vr-varad commented on Jul 20, 2025

@vr-varad
Contributor

@HIMU-2001 Are u working on this? or want to?

removed
issue/staleIssue has not had any activity for an extended period of time
on Jul 20, 2025
HIMU-2001

HIMU-2001 commented on Jul 20, 2025

@HIMU-2001

@vr-varad I could take it up.

vr-varad

vr-varad commented on Jul 20, 2025

@vr-varad
Contributor

Thanks @HIMU-2001

HIMU-2001

HIMU-2001 commented on Jul 20, 2025

@HIMU-2001

Hi @vr-varad @Touriist

Could you please take a look at my PR #6645

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @HIMU-2001@vr-varad@Touriist@Jivi-this-side

      Issue actions

        add max-width to images on learnign-paths · Issue #6411 · layer5io/layer5