Sorry, I couldn't think of a better title, I don't understand how to phrase this problem. I'm working with Bubble (no-code platform) and using CSS to resize my repeating groups for vertical responsivity. I've posted this question on Bubble forums, but am coming to Stack because the issue, I think, can be resolved using CSS. Appreciate any help.
The code that works is this:
<style>
#list {
height: calc(100vh - 175px) !important;
min-height: 468px !important;
overflow-y: scroll !important;
}
</style>
The problem I'm having is that the page layout seems to factor in the entire group's data regardless of how much of the group is visible. So, for example, say I have 20 items in the list and the list is 900px long. But, the viewport is only 600px, so the list is only visible up to 600px (and the remaining 300px can be scrolled through). The problem is the footer at the bottom of the page gets pushed down to 900px because it is acting as if the entire 900px group is visible, even though it's not. This means that there is a 300px white space between the bottom of the group and the footer. The footer should be at 600px.
Here is a video of the problem: https://gifyu.com/image/fdOT
As you see, Notes does not push the footer because it only has 3 items, but when the Person list is brought into the viewport it pushes the footer since it has more items even though they are hidden.
Is there some CSS that, say, ignores or hides to the layout the data that's not visible?
The problem is you're not setting the width for the list, so it will expand to fit the contain even when you set the scroll, to fix this, you can just set width: 100vw for the list.
Now the list will use 100vw, if the data more than that it will scroll, the footer will remain 100vw also.
Related
I am working on my first portofolio project (I'm taking a course on Udacity).
I have studied a bit about Responsiveness lately, but I'm having a hard time wrapping my head around it and understanding which is which (flexbox/ grid system). Therefore, I'm not even sure what I used by now. Grid? Flexbox? I'm completely confused.
The problem I'm currently facing is how to get rid of spaces between content rows when making the page responsive (for example when the viewport is smaller than 1200px, the gap between my main image and the rest of the content gets HUGE).
Please help me.
Here's my code overall:
https://codepen.io/antobloop/pen/LdjZmW
#media screen and (max-width: 1250px){
body {
???
}
}
And here's what im talking about:
Gap between content
You have a 600px height set on the .image so when the page gets more narrow, the image fills the top portion and you see a gap in the empty space.
I changed styles on .image from
height:600px;
to
height: 0;
padding-bottom: 56.25%
This is a little trick to maintain the 16:9 aspect ratio on the container that sets the overall height based on the width of the parent container.
https://codepen.io/Jason_B/pen/dmzpmq
This is the page I'm working on: http://www.vqinteractive.net/temp/index.html
I need the nav side bar and the main content area to evenly stretch to the bottom of the browser (or beyond, with content), whether they be empty or one has more content that the other. I put a border on the surrounding container and that is not stretching either. I'm pretty new to fluid grids and I'm finding all the old tricks, like position: absolute with height: 100%; are blowing out the grid system and height: 100%; alone does nothing.
I've been hunting through threads for the answer but haven't been able to find anything that pertains to responsive design. Also keeping in mind it is set up so the when the content is longer than the browser, the pic on the right stays fixed while the left side scrolls. Any help would be greatly appreciated.
Thanks in advance!
Visually, this is what I'm trying to do, with or without content, scrolling with:
http://www.vqinteractive.net/temp/images/example.gif
I fiddled around with the Google Chrome object inspector, and found this to work pretty well:
#media screen and (min-width: 1241px)
#main {
min-height: 85%; // <---- REMOVE
min-height: 600px; // <---- INSERT
}
The image does not count as content for the box you have set to a min-height=85%, and that box will therefore not expand without a definite min-height. Setting 'min-height: 600px', the box will always be at least the size of the image, and then expand if you add additional content in the box.
If I resize browser window (Newest Chrome in my case) so it gets horizontal scrollbar then the header div gets "cut off". In that case scrolling to right reveals some empty space. This is because the main content other then header have fixed width.
But the header div has 100% width and div is a block element by default also so it should stretch by itself to the 100% of the page width. Why it is not doing so? Shouldn't it be the default behavior? And why StackOverflow team didn't fix it?
The problem I found on many pages, including StackOverflow:
So I've been googling, even found a solution for a problem but not satisfactory enough. The solution is to set the min-width property to the width of that 's content. But isn't there a better solution?
I'm searching for a better solution, if any? Also I'm searching for an reasonable explanation why div's default behavior to stretch 100% of the width doesn't apply here?
You see a white space because, somewhere on the page, most likely under the header element, there is an element which is bigger than 100% – that's why you see the horizontal scrollbar.
The header infact is 100%, which means it's shorter than the full width of the document - therefore the white space.
To debug, I usually open the inspector and start from the bottom to the top and delete the sibling of the header, one by one, till I get to the point where everything is no more white space. At that point you know the problem is with the last element you just deleted. Try to look for errors in that particular element.
The "cut-off" div has a width of 100% of the visible area, so everything is ok.
The Problem is, that the content is overflowing and you are now able to scroll to the 120% width.
To fix this behavior und stretch your "cut-off" div always over the full width of the page, you can apply some css:
position: absolute;
left: 0;
right: 0;
Inspect the body element and you'll see that it only extends as far as the viewport. The topbar-wrapper is 980px fixed width, and its parent with the black background, topbar, is 100% (of body). topbar also needs a width of 980px, or the body element needs min-width: 980px...here on the StackOverflow site (looks like you found a bug)
This is a problem I often found on builds I was reviewing from freelancers, where they forget to shrink their browser down. The full-width sections usually need min-widths, if the site isn't fluid and there are fixed-width elements.
I've adapted some CSS to use in a website and can't quite figure out why one aspect of the page is acting the way that it is acting. Basically, when I shrink my window below a certain size horizontally, all of the text "drops down". This becomes an issue if a user is viewing my website through an ipad with vertical orientation. You can view this issue here. I'm hoping to make it so that even if the window gets smaller, the placement of my text remains intact.
The problem is that the area does not have enough space to put both the side navigation and content on one line. Make it automatically adjust the page's width when it exceeds certain decrements of width. This code is an example, and it is highly unlikely for it to work. If I could see the CSS more clearly, then I could provide the exact code.
#media all and (max-width:960px) { /* Assuming the #wrapper is 960px across */
#content {width:560px;} /* As opposed to 720px */
}
Edit
The content drops down at exactly 980px, so you have to shrink the width after there.
#media all and (max-width:980px) {
#container {width:520px;}
}
div#content "drops down" because is set to be float:right which means when you resize the browser the content div to going to be moved with the flow of the page as it gets narrower.
try styling div#wrapper as white-space:nowrap and div#nav_left and div#content both white-space:normal
There are 3 parts to the page.
Header, which has unknown content at design time as it is populated with text at runtime. All the text must be displayed, no scroll bars.( I think height: 100% does this)
Content, the content should fill the page below the bottom of the header to the top of the footer. if there is more text in the content that can be shown, then scroll bars should be available.
Footer. Footer should be 25px high and always sit at the bottom of the viewport.
The window is a popup and it should never have window scroll bars, it can be resized but no scrollbars. The contents scroll bars should be the only one available.
The content area should resize when resizing the window, but the footer stay the same, ie fixed to the bottom.
The widths would all be 100%
Header: don't specify a height. Divs will automatically size to their content's height
Content: specify a margin-bottom: 25px to avoid being overlapped by the footer
Footer: position: fixed; height:25px
You'll have to look into ways to simulate position:fixed for IE < 7. see, for example,
How do I get a floating footer to stick to the bottom of the viewport in IE 6?
This can be a pain in the butt if you want the footer at the bottom of the window. The only way I've found to do this and make it work cross-browser is by using a dreaded table layout - and before I get my head bitten off, table layouts are frowned upon - big time.
It's easy to position the header and the content...but as far as I'm aware, not the footer so far, I've only found 2 ways of positioning the footer at the bottom of the window (as opposed to the bottom of the document which may be half way up the window for short documents), 1 uses Javascript to reference the Window.Height and the other uses tables (the frowned upon, but simple way of doing this).
Up to this point, I've yet to see a CSS that reliably does this in all browsers. I would be very interested to see a CSS that does this...