I have three divs that contain background images (background-image: url()) but I'm having issues in making them responsive (using bootstrap) and putting spacing between them. I tried some things like width: 100% and margin: 0 auto but adding the margin property kinda removes margin and images lose spacing between each other if margin is used while padding of course doesn't work. Also for some reason I cannot add width to the images only height.
http://codepen.io/skullscream-1471533661/full/jAooJB
I'd usually google this but this has got me so frustrated that I can't even think of what to google.
Flexbox is excellent for making this sort of thing easy. Here is a great resource for flexbox to learn from.
Here I've given the parent "display: flex" to make the children flex elements. I've made the children 32% wide (leaving a 1% gap). I've set the parent to "justify-content: space-between" to tell the flex elements to leave space between each item.
On mobile I've given the parent "flex-wrap: wrap" so that if they are too wide they'll drop to the next line, and children 100% width so they span the full width of the device.
Additionally for the background images to work properly with the fluid boxes I've given them "background-size: contain" and "background-position: center center". Ideally it would be better to use actual image tags for them.
Please note that flexbox doesn't yet have full browser support (but it's still pretty good), and you'll need to add vendor prefixes as necessary.
.projects {
display: flex;
justify-content: space-between;
}
.projects > div {
flex: 0 1 32%;
background-size: contain;
background-position: center center;
}
#media screen and (max-width: 760px) {
.projects {
flex-wrap: wrap;
}
.projects > div {
flex: 0 1 100%;
margin-bottom: 20px;
}
}
There are two steps to accomplish this:
1. Change your parent div style to this:
#my-projects-section {
background-color: black;
height: 500px;
width:100%;
}
2. Add this to your child styles:
#image-one,
#image-two,
#image-three {
width: 30%;
margin: 1.66%;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
transition: .2s ease-out, .2s ease-in;
}
http://codepen.io/westefan/pen/Lkoooq
Currently this is statically defined, if you would like to add a new project into the section, you have to modify the CSS. There are also options to calculate margins, but it is not yet supported: https://developer.mozilla.org/en/docs/Web/CSS/calc
Another option would be to use Javascript to count childelements and create style completely dynamical based on the amount of children.
Related
On this page, there are some staff photos.
On an iPad in portrait mode, the staff photos are cut off on the right hand side.
I don't mind them being cut off, but I'd like them aligned center, instead of aligned left.
Note, I want the image dimensions to be the same, just the alignment shifted to the left to become centered, so that faces show in the middle of the image boundaries.
I've tried the following solutions from this question:
.ult-ib-effect-style13.ult-ib2-min-height img {
display:block;
margin:auto;
}
and
.ult-ib-effect-style13.ult-ib2-min-height {
text-align: center;
}
and
.ult-ib-effect-style13.ult-ib2-min-height {
display: flex;
justify-content: center;
}
but none of these are working.
First of all, I checked your css and it's a complete mess !
You defenitly should rework it off a bit. All those !important statements are terribly wrong practice.
However, I tweaked up a bit your img styles and found out a solution that fits your needs.
The trick was to override all the other width and height styles that applied to your images and simply replace it by a style which only set size of images based on heigth of container.
This solution prevent your images from being distorted.
I also reset the translate3d style so the images are centered in container.
.ult-ib-effect-style13.ult-ib2-min-height img {
min-width: auto!important;
width: auto!important;
max-width: none!important;
height: 100%!important;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
Result:
Edit :
Result # width: 900px
It's still good, images are centered and no distortion. However, you could make your divs wider at this breakpoint for a more elegant overall result.
See below for example :
Set the column (.col-sm-3) at 50% width and img to heigth: 120%; max-heigth: none;
EDIT:
As said in comment, try to put the <link> tag of your own css in the end of your <head> after all the other stylesheet your site loads.
This will cause your css to be rendered last and your styles to override the previous ones. Then try changing back your rules to those proposed in the explanation above.
This should do the trick.
for image you can use:
img {
display: block;
margin: auto;
width: 100%;
}
or you can use Bootstrap
then assign class "img-responsive center-block"
I know some of the solutions may work, but there's more to your problems. Its bad practice to insert an inline height or width. Plus you must know the exact size of your image, before you use it. Using image holders help with that. You used the height attribute to make your image smaller. If your image does not fit the container, then you'll always have problems that's why you must always know the exact height and width of the images that your going to use. It also help with performance. On Smaller Screens, there's more issues with your images. The right side is black out simply because of the size of the picture. With responsive design, you want your images to be more square then rectangle, even if its not perfect. The css is a mess, and you are using useless attributes and style properties and values. Simply resize the pictures with a similar width and height of the container (col-sm-3) and then use bootstrap "img-responsive" class and all will be fine.
Sorry I understood it wrong. So basically you want to center your oversized image in small div.
So your parent div (Image Parent) is positioned relatively. First of all you don't need lot of css you have written for your image class. Remove all of that from 'ult-ib-effect-style13.ult-ib2-min-height img' class.Now your code will look like
.ult-ib-effect-style13.ult-ib2-min-height img {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
height: 100%;
}
Even if you not going to remove your css from image class this will work for all screen widths!
Possible duplicate of this question.You can also position your image relatively in case of absolute parent. Don't forget to use transform, moz-transform for cross browser compatibility as mentioned in link.
If your concern is only ipad portrait mode and browsers like chrome, safari or firefox, then use object-position.
object-position: center center;
object-fit:cover;
If you need support in IE or Edge then it wont work in that.
You can mention any position you want, 'center center' is 50% from left and 50% from top.
Kindly clean your code a bit, there are lot of important overrides.
Just add following CSS
#media (max-width:1024px) {
.ult-ib-effect-style13.ult-ib2-min-height img {
width: 100% !important;
max-width: none !important;
height: auto !important;
}
.ult-new-ib {
max-height: 330px;
}
}
You have this css code for images
.ult-ib-effect-style13.ult-ib2-min-height img {
width: auto!important;
max-width: none!important;
height: 100%;
}
Add also this three lines
position: relative;
left: 50%;
transform: translate(-50%, 0);
And You Win))
Just add following css:
.ult-ib-effect-style13.ult-ib2-min-height img {
left: 50%;
transform: translateX(-50%);
}
This question already has answers here:
Flex elements ignore percent padding in Firefox
(4 answers)
Closed 7 years ago.
So, my goal is to have three square boxes whose sides expand/contract based on the size of the browser. Each box only contains one line of text, so the idea is to have a large amount of padding to fill in the extra space.
The site is built using flexbox, and I thought I had an elegant solution by using a :before to inherit the width of the parent element and use the length of it as a padding-top:
.square:before {
content:'';
padding-top:100%;
}
This works perfectly in most browsers, but I was dismayed to see Firefox is having issues. Here's the rest of the code and a JSFiddle. Any suggestions?
http://jsfiddle.net/uLqqop0q/5/
Thee CSS~~
#container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.square {
display: flex;
flex: 1 0 auto;
margin: 10px;
border: 10px solid blue;
justify-content: center;
align-items: center;
color: #111111;
font-size: 1.7rem;
height: auto;
text-align: center;
vertical-align: middle;
}
.square:before {
content:'';
padding-top:100%;
}
EDIT: Easiest fix—just add “display:table” to the pseudo element.
That's because you use a percentage.
With block layout, percentages in paddings are resolved according to the width of the containing block, even if the paddings are in the vertical direction.
However, flexbox wanted to change this behavior, and resolve the paddings according to the width or height of the containing block, depending on the direction of the padding.
However, browsers didn't agree. Then, Firefox resolves padding-top: 100% according to the height, and Chrome does it according to the width.
In the case of Firefox, since the height of the containing block depends on the height of the content, and the padding of the pseudo-element is part of the content, the percentage can't be resolved (it would be a circular reference). Then it becomes 0. This is analogous to the case of height: 100% in a block layout where the parent has height: auto.
You can fix it by using an explicit length instead of a percentage.
I've read awesome article and was astonished by the Flexbox Justification method. It works really well, but only when elements fit in the container entirely. I've created jsfiddle to illustrate this.
#container {
text-align: justify;
font-size: 0.1px; /* IE 9 & 10 don't like font-size: 0; */
min-width: 600px;
}
How, using this method, can I place the 6th element right after the 5th element without adding extra markup?
The sum of widths must not exceed the parent’s width, or there will be no space left to be distributed among them. Fixed (pixel) widths won’t always work on resize. If your six items are 150px each, and the container is, say, 800px in width, there’s no other way than to break into the next line.
Like the author of your article said: it’s more complicated. To stay that way, you could use calc() to have it dynamic. This is just an example:
.flex-item{
width: calc((100% / 6) - 20px); // 100% width ÷ 6 items - 20px space
}
Here’s an updated fiddle: https://jsfiddle.net/gy04jqdk/
Anyway, flexbox magic is relished best in its pure form. You can achieve the same using justify-content:space-between. To make it all work, you also have to add display:flex to the parent container. This will make it a flexbox and its immediate children flex-items. The extent of your changes might be limited to:
#container {
display: flex;
justify-content: space-between;
}
For visual illustration of element arrangement, the article at CSS-Tricks is well-known. You might be also interested in space-around, which is another value of justify-content.
Also, here’s a fiddle with a fixed width an evenly distributed space: https://jsfiddle.net/fdrgw3eu/
Assume you have a parent element that contains the three elements you would like to arrange in an equidistant manner:
.parent {
width: 100%;
}
.element1 {
width: 33.3%;
float: left;
}
.element2 {
width: 33.3%;
float: left;
left: -50%;
}
.element3 {
width: 33.3%;
float: right;
}
I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.
If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>
Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}
This will probably turn out to be a trivial issue, but I'm trying to center all my divs inside a container, but no matter what I try with the auto margins, everything is still aligned to the left of the page.
Anyone know what's going on?
Stuck it on jsfiddle too:
http://jsfiddle.net/eLogy4nh/
#page-container {
margin: 0px auto;
}
Any help would be awesome chaps.
You #page-container block has 100% width by default, so the margin: 0 auto will not do anything.
However, your block level child elements can be centered, for example:
#main-nav {
background: grey;
height: 30px;
width: 90%;
margin: 0 auto;
}
You need to apply the margin: 0 auto to each container that you want centered within your #page-container parent block.
You can do this many ways with CSS, either apply the same rule to each block that needs to be centered or create a CSS class with the centering rule and then apply the class to each block, for example:
#page-container > div {
margin: 0 auto;
}
Note that a simpler way of getting a similar result would be to set the width of #page-container to 90% and let the child elements take on the full width of the parent block.
However, both techniques are valid and the one to pick may depend on other design and layout considerations, for example, the use of background images and so on.
See demo fiddle at: http://jsfiddle.net/audetwebdesign/resqhsoe/
Looks like this has already been answered above...
But to center an item it will need a width, without one a block element will contain 100% of the available space.
#page-container {
width: 70%;
margin: 0px auto;
}