/wsr/ - Worksafe Requests » Thread #1541871

[11 / 1 / 1]

2MiB, 2388x1516, IMG_5201.jpg

i need help with CSS (text goes outside the sidebar)

Anonymous Tue 23 Sep 2025 22:32:46 No.1541871 View View Reply Original Report

Quoted By: >>1541879 >>1541905 >>1542190 >>1542195

Hi bros. Please, could anybody help me fix me a problem on my website? Nothing I try seems to help at all...

Below the navigation buttons, there's supposed to be a tiny e-mail icon and the link next to it. It works fine on PC, however on a tablet and on mobile, the text goes outside of the sidebar... The solution is probably really simple, but I really can't do it. I've tried for hours, Claude and Gemini are completely useless too...

If anyone had time, please could you take a quick look at the files? I know the coding is probably extremely amateur. I would be extremely grateful for any advice or better solutions. Thank you so much in advance for taking your time to help bros

html: https://pastebin.com/3c7MtaFm
css: https://pastebin.com/uzY9E5dC

Anonymous

Anonymous Tue 23 Sep 2025 23:55:03 No.1541879 Report

Quoted By: >>1541962

>>1541871
ask the AI to make the navigation pane repsoonsvie and fully contain all elements within it, especially vertically

Anonymous

Anonymous Wed 24 Sep 2025 02:27:52 No.1541905 Report

Quoted By: >>1541962

>>1541871
overflow-wrap: break-word
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text

Anonymous

Anonymous Wed 24 Sep 2025 14:12:46 No.1541962 Report

Quoted By: >>1542018 >>1542088

>>1541905
this is what AI suggested too, but then the text separates into two rows and i think it looks very unpleasant, i would really want to avoid it (the best would be if the font just scales accordingly to fit the text into the sidebar). thanks anyway man

>>1541879
i've just tried but what he did completely broke the layout on mobile/tablet, i think i have no chance but try with the @media rule

Egas

Egas Wed 24 Sep 2025 18:57:47 No.1542018 Report

Quoted By: >>1542138

>>1541962
Cant help you, but this project looks like there are maybe more questions to arise in the future, i recommend jsfiddle instead of pastebin

Anonymous

Anonymous Thu 25 Sep 2025 01:46:58 No.1542088 Report

Quoted By: >>1542138 >>1542190

>>1541962
well yeah the solution most people would think of when you say "text is overflowing" is to break it up

>the best would be if the font just scales accordingly to fit the text into the sidebar
how often are you going to be changing that text? just give it its own class and font-size it manually ffs

Anonymous

Anonymous Thu 25 Sep 2025 09:03:58 No.1542138 Report

Quoted By: >>1542140

>>1542018
i've looked for something similar, thank you my man!! i will use it from now on

>>1542088
hmm yeah. i have to be honest i have no idea what's going on

the sidebar has a set width (200px) and the images (pink and teal boxes) scale correctly on different devices. it's just that the font does not scale accordingly on the display, even when the text is a class and has a set font-size

i know it would be probably better to make it fully responsive from the start instead of using px, but from what i remember adjusting textures/images was much more difficult. it's supposed to look like an authentic mid-2000s website, but they did not have small devices to take into consideration at the time, so it's a bit hard to keep it looking authentic yet work well

Anonymous

Anonymous Thu 25 Sep 2025 10:12:10 No.1542140 Report

Quoted By: >>1542187

>>1542138
instead of using px font size, how about using vw
keep it in seveal @media queries for tablet/mobile size though so it doesn't become insanely large on desktop

Anonymous

Anonymous Thu 25 Sep 2025 18:31:21 No.1542187 Report

Quoted By:

>>1542140
That's what clamp was made for :)

Anonymous

Anonymous Thu 25 Sep 2025 18:39:11 No.1542190 Report

Quoted By:

>>1541871
You could also use
>overflow: hidden;
>text-overflow: ellipsis;
to cut it off and auto-insert ... at the end, but >>1542088 is probably better. Or just keep the href the same and change the text to something short like "Email us" or whatever that link is for

Anonymous

Anonymous Thu 25 Sep 2025 18:47:17 No.1542195 Report

Quoted By:

>>1541871
If you moved to box to the left of it you could probably fit it anyway.

Capcode	All Only User Posts Only Verified Posts Only Moderator Posts Only Manager Posts Only Admin Posts Only Developer Posts Only Founder Posts
Show Posts	All Only With Images Only Without Images Only Spoiler Images Only Non-Spoiler Images
Deleted Posts	All Only Deleted Posts Only Non-Deleted Posts
Ghost Posts	All Only Ghost Posts Only Non-Ghost Posts
Post Type	All Only Sticky Threads Only Opening Posts Only Reply Posts
Results	All Grouped By Threads
Order	Latest Posts First Oldest Posts First

On these archives

Your latest searches

i need help with CSS (text goes outside the sidebar)