Responsive with hickups


#1

I am building sites with Foundry. But I notice some hickups in the responsiveness of the Nav. Bar and the Banner.

Banner hickups
When you shift the browserwindow you will notice some jumps in the way the image is displayed. But most importantly: at some width the image is displayed far too big.

NavBar hickups
At some widths the menu shifts for a small part under the site title and logo. I tried to tweak the font settings of both the site title and the menu. But the issue still exists at some width.

Question: what could be solutions of these issues?

Images:
https://www.denkkracht.nl/Download2/download2.php

The examples can be found:
[https://www.denkkracht.nl/vitonsp/InfoContact/page-14/]

[https://www.denkkracht.nl/Activiteiten/page-3/activiteiten.html]


#2

Hi there @denkkracht

This is being caused because of the amount of content in the navigation bar. There’ limited space since it is a horizontal area. You can reduce the number of navigation items, place some as child navigation items, reduce the site title’s content, remove the logo, etc, etc to try and pare down the content in the navigation bar.

I’m not seeing the Banner problem you refer to in your post. If you can explain it better for me or shoot me over some screenshots I’d be happy to look closer. Being the weekend it might Monday before I get back to you.


#3

Did you check the images I put in the Download-folder? They should show the different looks on different widths of the browser.
At some point only the logo is visible.

Enjoy the weekend!
I will be back on Tuesday afternoon.


#4

Nope, sure didn’t. Thought you were pointing me to a page you wanted me to see the problem on. So when I visited that page and saw no problem I can back here and looked at the other two pages, too. I’ll take a look at that page again in a little while.


#5

In this screenshot, I suspect you’re talking about the larger logo image size in the branding? Is so, you’re simply hitting a small one or two pixel area between breakpoints. The breakpoints are measured using em values, which change based on the user’s text size settings for their browser as well as your base font size. This makes them not whole numbers, so there’s a bit of rounding that is happening. Thus the small one or two pixel gap between the breakpoints. Your visitors are not going to be doing what you’re doing and resizing the browser back and forth across every width size.

The logo in your screenshot, from above is obviously different than the live link you sent, which uses a very large image file. You’ll want to scale that image down quite a bit. It will help in many ways, including page load speed.

As for the banner disappearing – I’d need to have you project file in-hand to have a look at it to see how you’ve set things up. If you send me a ZIP file containing your project file and point me to the page you have the problem on I will take a look at it.

This is, as I mentioned above because of the small one to two pixel gap between breakpoints, but the reason it seems so egregious is because the image file is huge. That PNG image is 2,362 x 4,729 px in size and is 300 dpi. That is enormous unfortunately. You’ll want to scale it down a lot as well as the image needs to be 72 dpi.

As for the “menu shift” you mentioned…

As I talked about in my earlier post, this is because of the amount of content in the Navigation Bar.


#6

OK, Adam many thanks for your comments.

I had in mind that RW by itself consolidates images and so the scale couldnot be the problem. OK, good to wake up.

I must say: in the meantime I developed another website with the Nav Bar and it works perfectly! So, problems solved!


#7

Awesome. Glad you got it sorted. I’ll go ahead and close this thread then.


#8