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.
Related
Here's what I'm trying to do. I want to have the navbar-brand image overlapping the navbar without altering it's height (navbar has fixed height of 80px).
It kinda works, however I cannot get the image to fully expose, it's being cut at the top. I tried vertical-align: top but it just slightly changes the position, the image is still being cut off. I want it to start exactly at the top of the screen, without any padding.
On devices with screens smaller than md the overlapping image is being hidden and another one is show, which should now be img-fluid and adjust it's size to the size of the navbar. However when resizing the screen so the navbar collapses, the navbar size remains 80px but the image starts overlapping it and the collapse-toggler button gets also messed up.
How can I get both of these things to work?
Here's a codepen: https://codepen.io/anon/pen/QYmMyg
Edit: Also, I noticed that setting the navbar to a fixed height actually prevents the collapse from working, because the height is limited. Is there any way I could increase the navbar height and keep the overlapping image and also keep the collapse working?
.navbar-brand {
transform: translateY(calc(50% - 40px));
padding-top: 0;
}
... will fix your problem (where 40px is half the height of .navbar).
Working example: https://codepen.io/andrei-gheorghiu/pen/pGLrOZ
The problem is rooted in .navbar>.container { align-items: center;}, which you don't want to mess with.
Ref: "Edit", it's a different question altogether. Answering it here would be detrimental to anyone having a similar problem, as it decreases the chances of them finding the answer.
Avoid asking multiple questions at once. Your questions need to remain helpful for anyone with a similar problem, so you need to ask them separately.
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
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;
}
Let's see:
Container box is 920px, left box is 600px, right box width dinamically changing between 200px and 400px. As we know in basic situation if two floated box wider than their container the lastest one breaks into a new line.
I tried to solve it with negative leftmargin on right box and it works fine. (buggy on IE6 but it does not matter.)
Is negative margin good or can I avoid annoying float box breaking in other way? (i don't want to use absolute positioning.)
Negative left margin is great. I use it lots of time to align to the center left:50%; margin-left: -250px; // width == 500px; so don't worry you can use it without a problem.
Also ppl use it for lot's of small things. It's not uncommon for sites to have elements with negative margins.
Even here in Stackoverflow if you look at the CSS you can find negative margins.
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.