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 broshtml: https://pastebin.com/3c7MtaFmcss: https://pastebin.com/uzY9E5dC
>>1541871ask the AI to make the navigation pane repsoonsvie and fully contain all elements within it, especially vertically
>>1541871overflow-wrap: break-wordhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text
>>1541905this 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>>1541879i'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
>>1541962Cant help you, but this project looks like there are maybe more questions to arise in the future, i recommend jsfiddle instead of pastebin
>>1541962well 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 sidebarhow often are you going to be changing that text? just give it its own class and font-size it manually ffs
>>1542018i've looked for something similar, thank you my man!! i will use it from now on>>1542088hmm yeah. i have to be honest i have no idea what's going onthe 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-sizei 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
