Responsive problem - html and css site in development

[Jakobi]

Hi guys,

I've decided (for some reason 🙂 ) to re-code my Wordpress site from scratch with my own code... It's going well, though there is a minor problem within the responsive framework and I can't find the mistake.

The problem occurs when scaling the site below approx. 400 px - something blocks the scalability.

This is my wp site that I'm imitating:

www.jakob-i.com

This is the one I'm working on and below are the pages where the problem occurs (only html and css, scalability created with display:flex code mainly and media queries) :

www.jakob-i.com/testsite7/index.html

www.jakob-i.com/testsite7/moderne-kunst/graffiti-kunstner.html

www.jakob-i.com/testsite7/tegninger/freelance-illustrator.html

Press ctrl-u to inspect (you know that, I know), here is the link to external stylesheet: https://www.jakob-i.com/testsite7/stylesheet.css


Don't spend way to much time on it, I'm just looking for help and the fix, and maybe you experienced coders have just seen the bug before. Try and scale the above three sites below 400 px in width or open them on your mobile - there you will see the bug. I'm quite sure a more experienced coder than me will recognise the problem straight away (maybe it's the images, the padding or something other really simple - it's a very simple coded site)

Hope someone will look a little - all help much appreciated and acknowledged.

/ Jakob

 

[Johna]

Hi there,
Could you explain a bit more what exactly the problem is when scaling down?

I scaled the page down (using devtools) and haven't noticed any problem. I'm not sure what I'm supposed to be looking for.

 

[Jakobi]

Hi there,
Could you explain a bit more what exactly the problem is when scaling down?

I scaled the page down (using devtools) and haven't noticed any problem. I'm not sure what I'm supposed to be looking for.

Hi Johna,

first and foremost thank you for paying attention to my problem!! That's really nice of you.

I've attached a few files here where the problem is visible. Approximately at 380 px in width the div 'main' stops scaling down - it just locks in width. I don't know if it is that div itself or some content I've coded wrong. See the images attached.

Once again thank you for having a look 🙂

All the best

Jakob

 

[Johna]

From your image, it looks like the div width isn't reducing because the title text is taking up that space. You will have to reduce the font size or enable word breaking.

 

[Jakobi]

From your image, it looks like the div width isn't reducing because the title text is taking up that space. You will have to reduce the font size or enable word breaking.

Aaah that solved the problem - did a lillte bit of testing and best word breaking code was: overflow-wrap:break-word; That fixed it with the best word breaking for readability.

Thank you a lot Johna - you're awesome!

It seems like you're an experienced coder and I need to find a code that makes my menu scroll - if you just know it at the top of your head I would love to know it too. If you don't - then don't research it I'll try and sort it myself - you've helped plenty already 🙂

Thank you a lot again.

All the best

Jakob

 

[Johna]

Hey Jakob,
If this is a different problem from the original question, I would kindly ask that you post a new question, to keep the thread specific to the original question.

 

[Jakobi]

Hey Jakob,
If this is a different problem from the original question, I would kindly ask that you post a new question, to keep the thread specific to the original question.

Hey Johna,

you're right - it's better for the community and the other users to get the right title for the question.

Thank you a lot for the great help!


All the best

Jakob