[BUG]: Footer text wrapping misaligned

rbjks / rbjks.github.io

Info website for an NGO 'Ranjeet Bakhshi Jan Kalyan Sabha' which aims to empower local communities in Himachal Pradesh

https://rbjks.github.io/

13 stars 37 forks source link

[BUG]: Footer text wrapping misaligned #124

Closed adityaraute closed 3 months ago

adityaraute commented 5 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

The address is being warped down at the wrong spots in the footer

Expected Behavior

The text be split over lines such that no word is truncated or divided over two lines. If this modification will lead to changes in the desktop view as well, please convey so in the PR.

Steps To Reproduce

Open website in mobile view
Scroll to the footer

Anything else?

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

mohit-bhandari45 commented 5 months ago

I want to work on this

adityaraute commented 5 months ago

@mohit-bhandari45 Please share how you plan to resolve this issue?

Bashamega commented 5 months ago

Hello:) I would love to work on this. Please assign it to me I will add this to the css to fix it:

white-space:pre-wrap;
word-break:break-word;

Preview:

adityaraute commented 5 months ago

The image doesn't show the text aligned properly. I would prefer the word District be present on the next line as well. Can we achieve that? Perhaps get rid of spaces around the hyphen?

Bashamega commented 5 months ago

The image doesn't show the text aligned properly. I would prefer the word District be present on the next line as well. Can we achieve that? Perhaps get rid of spaces around the hyphen?

Sure. Please assign me

adityaraute commented 5 months ago

I'd like to see the preview before assigning, if that's okay

Bashamega commented 5 months ago

For the logo i have fixed it, but the text wrapping can't be fixed because there are many mobiles with different sizes, but we can add a js code that checks if it is a mobile to add a br tag before district, which will make the district on a new line. for the hyphon spaces we can easily get rid of it by just deleting the spaces This is the logo:

adityaraute commented 5 months ago

I don't like the idea of using js for adding a <br> tag I feel the logo, too, is very tine but that can be another issue.

I'll assign the issue to you, let's see what we can achieve with changing text, hyphens, and CSS properties.

RohanRam commented 3 months ago

Hy @adityaraute Is this still on?

adityaraute commented 3 months ago

It is but first I'd like an update from you on #143

caiodutra08 commented 3 months ago

Can I take this?

caiodutra08 commented 3 months ago

Already finished im my local repo what is being asked for, just lmk if I can take this.

caiodutra08 commented 3 months ago

Also fixed aswell a hamburguer bug that was occurring in every media width.