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.
Related
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.
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
I am building a responsive login page where everything has % widths. When I add a margin:0 auto, my main div is perfectly centered (as it should be), however when I shrink the browser size horizontally, I always lose the right margin or padding, regardless if it's set with a % or not. Padding on right is cut off at smaller screen size Here is a screenshot demonstrating the padding on the right getting cut off.
How can I force the margin or padding to always be honored regardless of the screen size?
==== UPDATE ====
I apologize for using the word "responsive" in this question. I do, in fact have media queries at different browser sizes for adaptive behavior, but my question is more simplistic than that. Before any media queries kick in, the right margin disappears when the browser shrinks. Something in my containing element must be throwing off the liquidity of the page. I cannot seem to figure out what this is. Any help is appreciated.
Here's a link to the code
I think this will do based on the code you have right now:
.am-body {
background: url("../img/body-bg.png") repeat-x left top #ededed;/*is being overwritten*/
text-align: center;
position: relative;
margin: 0 auto;
}
For a live demo, visit my website # http://hello-world.cu.cc .
Make sure to check out the homepage, the projects page and the comments page. Each of these pages has the same sidebar with different styles applied to it. This is to show you what I have tried and the problems it causes.
I am making a website which has a sidebar to the left and the main content to the right. The problem i'm having is to do with the sidebar. I have it floating to the left and this is fine untill i zoom in on the webpage and all of a sudden the sidebar moves position which wrecks up the whole layout. I've tried to fix this by setting the position of the sidebar to absolute and the position of the container to relative. Now this solves the zooming problem because when I zoom in now it stays in the same position. However, since the position is now absolute, the page doesn't automatically get longer to accomodate the sidebar. The temporary solution I am using at the moment is to position the sidebar absolutely to fix the zooming problem and then adding a max height as well as overflow:auto to provide scroll bars that can be used to scroll the sidebar.
You have two things that seem to be causing problems.
#header has min-width:100%
#main has width:1100px
Fix those and you'll be on your way.
Like Randy Hunt pointed out above, the biggest issue is being caused by your #header. I would apply these to your header: position: absolute; left: 0px; top: 0px;, then you'll need to adjust all the elements where you're currently using a negative margin by applying a positive margin as well. Take the 150px height of your header and add the negative margins to find the new positive margin value (so a -138px top margin would become 12px).
Also, instead of min-width: 100%; I would do something like width: 100%; min-width: 1100px; or whatever the width is.
Hope that helps.
What I must change to make the navigation bar fixed when screen size under 940px? I don't want to make it responsive. If you resize your browser windows under 940px you will see that scroolbar-x (bottom-scrollbar) appear, but when you scroll it to the right, the navigation bar position still fixed, and some menu won't appear.
Maybe some picture will explain what my problem.
This can't be done in CSS alone.
The example you give (Twitter) has the navbar with fixed position AND fixed size at all screen sizes. Fixed position means that the scrollbars will not affect the position of the navbar, and this is why you can't use the x-scrollbar to see the part of the navbar which, once it's less than 940px wide, is hidden 'under' the right border of the browser window.
So you have to choose, either
Have a fixed position, fixed size navbar which is present at the top no matter how far the user scrolls down and accept that under a small enough screen they won't be able to scroll horizontally to see it all, OR
Have a fixed position, fluid size navbar which adjusts its width to accommodate different screen sizes, which will hopefully mitigate the need to scroll horizontally in the first place, especially if you let it grow vertically if its contents don't fit in one row, OR
Have a non-fixed position, fixed size navbar which will respond to horizontal scrolling but will not be ever-present when the user scrolls down the page.
Effectively, you can't have position work one way in the x direction and another in y.
You can see what I mean by option 2 by editing the following classes in the Twitter page using the CSS inspector:
.global-nav .container {
width: auto;
max-width: 865px;
}
.global-nav, .global-nav-outer {
height: auto;
}
The second selector implements the vertical fluidity for once the contents can't fit in one row.
You can see what I mean by option 3 by making these changes:
.topbar {
position: absolute;
/* ... the rest as is */
}
EDIT
Of course, that it can't be done in CSS doesn't mean it can't be done at all. Here's a jsfiddle implementing that script you mentioned. This uses MooTools as opposed to jQuery, which I normally use with bootstrap.
The fiddle: http://jsfiddle.net/uadDW/4/
Full screen version to better see the effect: http://jsfiddle.net/uadDW/4/show/
(Thanks to #Sherbrow for providing the base fiddle with which I made this one).
Ran into this same problem and was thrilled with the suggested solution, but then I struggled to implement in my own code (Yes, noobie).
It turns out that there's a conflict here with jquery.js, which I need elsewhere in my code.
http://jsfiddle.net/uadDW/83/
/* code as before .. only added jquery.js link */
Remove jquery.js from the External Resources in the above fiddle and you get the original desired behavior. Rats!