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;
}
Related
I am looking to get some space left and right from a Boostrap container.
At the moment I am doing it by having a 'fluid' container/section and setting some margin on both sides. That way we have some space left and right.
The problem with doing that is that on larger screens it will look horrible and it gets stretched out.
What I'm trying to achieve is to have a more consistent left and right spacing outside the container when on a normal screen:
So that the spacing outside the container is always like 10% and not being stretched out on larger screens.
Here's a Codepen with what I have so far:
https://codepen.io/monsmado/pen/ZEorope
'codewise' it is not the most optimal, because I quickly copied it from my React/Next.js project
If I'm interpreting your question correctly, you could set a max-width: 1400px; (or whatever you want) and margin: 0 auto on the .hero. You would need to override the other !important rules that are getting applied there.
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.
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.
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
I have a div that is centered on my website using margin: auto;
but for some reason if i start to shrink the width of my browser the div i showed in the image below begisn to move left with the browser, and wont stay in its position. I have tried using the position: thing but it doesnt seem to be working for my issue.
How can i get this div to stay centered and not move with the browser?
You can see the issue here on My Website
If you trysh rinking the browser width beyond a certain point that div just begins to move and isnt centered anymore.
Its a problem because people with small resolutions will not see the website right.
The div that seems to be having the issue is main-frontpage
change to min-width of your #footer to the same as the .jflow-content-slider & #main-frontpage (1050px) and then at least your content slider will not overlap the text at the bottom.
EDIT: looking again at your setup, just change the width of your #main-frontpage to the same as #footer #content-wrapper - 1240px. Really this is way too wide and it should be 960px wide but unless you change the width of your footer content this the only way to do it