I have a small formatting issue that I’ve been having trouble with for some time. Under my site, hovering over “Product” Nav menu item opens a model and hovering over the various left-side menu items changes what is shown on the modal (split between a left and right side).
The left menu and left side of the content on the modal are fine, but the content on the right is affecting the overall size of the modal and position of other elements. Specifically, when switching between the top 3 left-side menu items, the text block on the right under the image changes how the rest of the modal’s elements are positioned. I am unable to write more than 2-3 words before everything starts pushing to the left and making these changes.
I’ve included a couple of screenshots to show this. I’m wondering what styling settings I’m missing/have wrong to be able to type as much as I need to in this specific text block without pushing all other elements further left?
hi @Henrik one way how to is to set your modal as grid and set first column to min-max let say 200px/0.5fr and other two cols keep 1fr. But your modal need a bit more love as I saw several issues using flex instead block etc tha make to work on modal harder than it should be.
Thanks @Stan, I’ll keep experimenting with it, and that grid technique. Are you suggesting using block display is a better idea than flex for all the modal elements?
Correct, there are elements using flex vertical where can be just used a block instead. Thing of that then elements natural flow is from top to bottom.
Thank you @Stan I did notice those and quickly changed them to block. Although that alone didn’t seem to solve the original issue. I’m going to experiment with setting up a grid now and see if that helps. Will follow up with updates. Cheers!
Like I have mentioned it needs a bit more love to make it work and make it responsive especially on mobile devices can be challenging as modals have different purpose to be used for. There is no one magic setting to make it work.
Thank you @Stan, I’ve been able to build out the grid for the modal and it looks quite good but it has some of the similar problems as originally. I wonder if you had any thoughts on the way I’ve made it so far and how make it more consistent that I’m missing/not getting right? Thank you for your advice so far on this
What I usually do in situations like yours is start by checking the CSS properties of the text block in question. It sounds like the text block might be unintentionally affecting the modal’s layout due to its dynamic content.
A good place to start is by setting a max-width on your text block. This will prevent it from expanding too much and pushing other elements out of place. You can also try using overflow: hidden; or text-overflow: ellipsis; to manage the text overflow if the content is too long for the allotted space.
Thank you @RickyOsborn431, overflow: hidden didn’t do it in this case but it was setting a max-width that did the trick. At first it worked with a width of 300px or less, but hoping to make it more responsive to screen size I used 18 rem. Weirdly, using any % value did not help it at all. Thank you for the help!
IMO setting max-width will of course work but there are another approaches like eg.
set max-width with characters with unit ch(another not optimal use in this case)
if container is set to flex you can use basis to limit width
container queries
grid minmax
etc …
if you would like to know about CSS you can check Kevin Powell YT as he is CSS guru. Just keep in mind that WF offer only bare minimum when it comes to CSS and some implementations like CSS variables are … This mean that without custom code you will have a hard time.
As your element you call Modal is used to display MegaNav you can search keyword ‘meganav’ in browser to find examples how it can be done when it comes to responsiveness. It is not easy task to make it right including accessibility.
Thank you @Stan ! This is really helpful, I appreciate all the different approaches.
Going to continue fleshing out the site in its entirety and come back to refine this, especially when formatting responsiveness to varying screen sizes. I’ll give all this a go, review Kevin Powell’s YT videos, and try out MegaNav examples.
