Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.
So I have this element that is like a confirmation of order that pops when you are done and is fixed positioned. However, when I resize mobile view to smaller screen, vertically, it slowly stats disappearing from the bottom up and is not scrollabe.
Element CSS:
11 Replies
You have fixed height and nothing to tell it to scroll. Try
overflow: auto;It shouldn't be scrollable itself, just for itselfto adapt to screen size, and if it's too big for scroll to apear like usual. But I guess fixed positioning kinda contradicts that.
I get what you are saying, but imo it can not be too big if it adapts to the height as vh is a relative unit – there needs to be some kind of limitation. And then comes the overflowing content which you want to fall back to the flow of the structure rather than be handled inside the fixed overlay. Maybe there is some fancy-schmancy way to do it, generally speaking this seems more of a design issue rather than code 🫠
It's one of FrontEndMentor's free projects
As you can see they set it to be like 90% of the screen
I'm a bit rusty, so I was getting frustrated by why I can't do a simple thing like this
But it may be a design issue as you said @Simon
What is your opinion now that you see the design itself? @Simon
I am by far not an UX expert. imo as an easy approach, I would allow the cart-items container to scroll if needed, with e.g. 4+ items, while keeping the rest of this view as consistent as possible (for the user's sake). The items and the price should be the only elements that vary, I guess? That means the overlay, heading or reddish-colored button are always at the designed position, no matter the content between. It looks good already.
Addendum: I see it as good practice to "teaser" the next overflowing item by making the container and/or inner spacing big enough, so that they are half-visible. This indicates to the user that there is more and scrolling is wanted – instead of just hoping they realize the scrollbar.
Ok the scroll for items is a excelent idea
As well as the resize of the itesm to show that it is scrollable
I just need to figure out how to make the whole element be shown even at smallest of sizes of screens
in terms of height
I haven't touched the project yet that is why I'm answering late, so sorry about that, but will have some time tomorrow and will try fixing it
if you have ides please let me know. xD
But thansk for all the help so far!Q
Maybe I should go with overflow:hidden; and just lock the element from the top
position relative or something, absolute, and have it have fixed size instead of % of vh
I feel like you don't need overflow or fixate rules as there is nothing to worry about when overlaying the viewport.
Especially when developing for handheld devices you can (should) use responsive units. You may lean to absolute units when you can be certain that the concerned element won't cause any issues.
Further perhaps you want to think about what happens when the user flips the device to landscape mode.
For the inner structure of the overlay,
flex or grid can do some heavy lifting.
Here is a quick & dirty example https://jsfiddle.net/1jqruwhd/2/ – keep in mind that this approach and/or parts of it may neither be correct nor good.Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
@Simon Ok close but not bingo
https://idyllic-raindrop-f32a0c.netlify.app/
Here is the start of the project
Go into mobile view, about 375px width and try lowering height viewport, you will see that I Can't scroll down to see my order menu
That is the whole problem xD
I guess overflow:auto; does the work, but it kinda looks ugly
I'll update it in case you look at it. It's ugly, but it kinda does the job
I guess going with flex can make it more responsive instead of me hard coding margin as well
like you did
Just didn't think it would need it
But it does the same with flex
Do you have freedom over how it can look or do you need to follow a strict template?
Good job on recognizing the issues – If you are free to adapt the design, I would advise you to seek inspiration from other sites that you visited and know of a similar function. Visually check how they solve it. Maybe find a hint on how to improve what you have so far.
Most commonly scaling down typography, loosening reins on design ideas and sometimes cutting secondary content are effective ways to gain space in responsive webdesign. For that perhaps get comfortable with CSS container- and media-queries to provide fitting rules at specific sizes (or ranges).
Just be mindful of your own sanity. Sometimes settling with the ugly is a better approach than min-maxing for niche viewports.
Don't get me wrong, there are likely band-aid fixes that could force design. But I am uncomfortable with suggesting these as they could result in unfitting bad practices.
-# band-aid like overflow:auto; fixes the issue, but not really
(: while the design may work for handheld-portrait, look at the wasted vertical space in landscape. This is a self-made issue – so before trying to solve this technically, you could ask yourself «does this viewport really need to look like that or should it rather work?» ~imo learning to be d'accord with form follows function is a valuable mindset lesson 🙆
Aside from checking for inspiration, for this size you could try; allow overlay full height, rearrange the heading section, scale the elements, reduce margin/padding, etc.
