[Bug] Responsiveness of the website

[himanshu1221]

Description

Website is not responsive as it has overflow in x direction

Reproduction

1. Go to website
2. go to inspect
3. select device
4. See error.

Expectation

It should not have any overflow in responsive mode

Screenshots

https://user-images.githubusercontent.com/32031706/227828901-8f3668fe-4958-4b6b-b22e-60332564fda8.mp4

Environment

• Device: (laptop)
• OS: (UBUNTU)
• Browser: (CHROME)
• Version: (111.0.5563.110)
• Other info: (eg. display resolution, ease-of-access settings)

Additional context

I would like to work on this issue if maintainer finds it valid enough

Resolution

• [X] I would be interested in resolving this bug.

[pushkar707]

I would be interested in resolving this bug. Can you please assign this issue to me

[kunalshokeen051]

I can fix this if you assign this to me.

[TimidRobot]

@kunalshokeen051 Please see Contribution Guidelines — Creative Commons Open Source for how we manage issues and PRs.

[RohanJacob23]

Hello @TimidRobot,

I have looked into the issue and found that the problem is related to the margin-right: -0.75rem property in the .columnclass. However, I couldn't locate this class in any of the scss or css files. Could you please guide me on how to proceed?

[TimidRobot]

@RohanJacob23 it's probably from Vocabulary or one of its dependencies. What should the values be for better behavior? Is there a class to achieve that in Vocabulary?

[RohanJacob23]

@RohanJacob23 it's probably from Vocabulary or one of its dependencies. What should the values be for better behavior? Is there a class to achieve that in Vocabulary?

Hello @TimidRobot,

To improve the behavior on smaller media screens, I suggest setting the margin-right to 0.

[TimidRobot]

@RohanJacob23

Try assigning the margin-right-0 class to the appropriate element.

[pushkar707]

Please check #717 PR where I have solved the issue @TimidRobot