I am trying to have 8 images floated by each other with
width: 25%;
float: left;
Here is a fiddle:
https://jsfiddle.net/y06z0em1/
If you resize the section that the images are in, you will see that there are times when it breaks because some of the images are off by a fraction of a pixel. Could I ever change make it so that every pixel always rounds up or down?
Thanks!
Browsers round fractional pixels automatically and this is browser specific, some round it up, some down; There is no way to force it to do one or the other with CSS.
A solution could be to work with LESS, there are functions for that (ceil, floor).
But if you need a solution with CSS I would just suggest define the width as calc(100% - 0.5px) / calc(100% -1px) or 99.9%. That's just not perfect, but a solution. You can adjust it as you like and as it works for you.
But I'm not sure your problem comes from that.
Take a look at the following fiddle and tell me if it solves your problem. Instead of floating I use a layout based on display:inline-block here, and it seems like there is not such a problem.
https://jsfiddle.net/a693yj52/
I'd recommend using Flexbox here.
It'd look something like this:
.container {
display: flex;
flex-wrap: wrap;
}
.container > * {
flex-basis: 25%;
height: auto;
}
Related
I wanted to implement a typewriter effect in CSS and I found this great article in CSS Tricks
I was tinkering around with it and wanted to see if I can implement what would be on a hero image, shown here in Codepen
However, you can see that the blinking goes all the way to the end.
Is there way to fix, or this unavoidable, since the display it's set to table-cell?
You can try that. Remove fixed width from intro container and give this into description. And for centering you can add margin: 0 auto into intro.
#intro{
display: table;
height: 100vh;
margin: 0 auto;
.intro-description{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw;
}
}
Codepen: http://codepen.io/anon/pen/WGydqj
The closest I got was by changing your typing keyframe.
#keyframes typing {
from { width: 0 }
51%{border-right:transparent;}
100%{border-right:transparent;}
to { width: 100% }
}
You can hide the cursor from going all the way off but I'm not sure it looks quite right because it takes awhile for the bink/cursor to reappear at the end of the sentence. There are also some responsive issues with this because smaller screen sizes the blinking will disappear too early, the opposite problem... If this solution works for you but you still need it resposive, then you'll need make multiple keyframes and apply them through mq...
That being said, this is really cool. I didn't know you could do a pure css typing effect. I thought the only way to do this was with heavy DOM manipulation like they use in typeWriter.js which may still be a viable solution for you as well if the pure css trick doesn't work out.
Hello,
I'm playing around with Bourbon Neat, and I am trying to do three columns which cover the 100% of the windows width outside the configured grid ($max-width: em(1160)), and without any gutter. Similar to the following image (blue, yellow and green boxes).
So, to make the full width of the section, I don't specify any 'outer-container' and for remove the gutter I add the mixin 'omega' but looks like this:
I quick fix I thought myself is adding width: calc(100% / 3) to the three articles but I think is not the best solution...
Any idea?
Here I'm leaving the code: codepen.io
Thank you!
I do think your width: calc(100% / 3); was just about the right solution. I came across this exact situation in my work today. #mike-harrison's solution is what I tried first, but as I mentioned there, the span-columns mixin makes the :last-child smaller than the others. Issues in Github about that were answered that it was very intentional and your use case is better served with simple percentages.
So here's my solution: http://codepen.io/alexbea/pen/BzozXw;
The key rules are:
section.HomeProducts
+row
article
float: left
// width: percentage(1 / 3)
width: calc(100% / 3)
I used your solution with calc(), which works, though I also included a commented out approach of width: percentage(1 / 3). Most modern browsers do support calc(), but the other would serve older browsers a bit better, I think. The float should take care of any browser variations and is also what Neat uses in the span-columns mixin.
I also included the row() mixin on the parent to clearfix the whole section and make sure the floating doesn't make them disappear.
The way I would do it would be to have a 100% outer-container, and then use block-collapse on the elements inside. I have done a quick pen here:
http://codepen.io/mikehdesign/pen/ZObEdw
HTML is the same as yours, this is my SCSS:
section.HomeProducts {
#include outer-container(100%);
article {
#include span-columns(4, block-collapse);
height: 200px;
background: green;
&:first-child {
background: blue;
}
&:nth-child(2) {
background: yellow;
}
&:nth-child(3){
background: green;
}
}
}
No matter what screen size I use, the Sidenav is always the same size. I tried adding attributes such as
- flex
- flex="85" (to get 85% of its container)
Can't seem to find a good approach.
In angular material, md-sidenav has these attributes:
width: 304px;
min-width: 304px;
That's why the width will be fixed at 304 px no matter what device you use.
So if you want to change your sidenav width you'll have to change the css a bit.
If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 200px !important;
width: 85vw !important;
max-width: 400px !important;
}
Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.
md-sidenav.md-locked-open {
width: 250px;
min-width: 250px;
max-width: 250px;
}
I'm not sure if that is the proper way but it seemed to work for me.
Thanks to user3587412 I could find easily the required styles.
To get the md-sidenav to adjust to a flex parent just override
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 0px !important;
width: auto !important;
max-width: none !important;
}
After trying different CSS in this thread I end up with :
md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
width: 200px;
min-width: 200px;
max-width: 200px;
}
I'm currently on angular-material 1.0.8 and tested with Chrome 50 only.
With this CSS what works for me :
Animation close and open OK
When locked OK
When not locked OK
In case anyone comes here using the latest mat-sidenav, you can explicitly set the width on the the element.
mat-sidenav {
width: 200px;
}
The docs caution against using percentage based sizes.
https://material.angular.io/components/sidenav/overview#setting-the-sidenavs-size
Here's a somewhat "jank" solution, but it doesn't mess with the animations at all. The sidenav automatically resizes itself in order of the items inside it to fit perfectly. As such, you can just add a span with the width of your choice to the mat-drawer to set a minimum size. Note that this only works to set a minimum width, and not a maximum width.
<span style="height: 0px; width: 200px; display: inline-block;"></span>
I came across this issue, as well -- even though the 304px width is plenty, I had a card in the content area to the right that was squeezing the sidenav. So, using the flex grid I was able to add <md-sidenav flex="15" class="md-sidenav-left ... to get the width I wanted without overriding CSS. It sounds like this didn't work for you, so maybe it has to do with the layout options in your design...
I just came across something
#element {
left: 50%;
margin-left: -(elemntwidth/2)px;
}
being (elemntwidth/2) already a number like 30px, for ex.
I would like to know if this is a safe way of crossbrowsing the responsive elements positioning so I can abandon the way Im doing right now with .jQuery
$('#element').css(left: (screenwidth - element / 2) + 'px');
More than everything Im interested in a cross mobile device browsers efective solution and this css only I found it clean and simple, so simple that I need to ask if this could be true. Thanks
CSS Frameworks have this functionaility baked in.
Checkout: Foundation 3
Otherwise, you will need to rely heavily on Javascript and Media Queries to achieve pixel perfection.
Not to mention this is the first of many problems you will encounter to acheive cross devices / browser stable elements. All of these things have been carefully thought out for you alreacdy.
This is a way. For some elements it works, resposive, centered and no jQuery.
HTML
<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>
CSS
.element {
position: relative;
width: 90%;
background: black;
margin: 0 auto 10px;
text-align: center;
color: white;
padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}
Wroking Demo | Final result full screen
AFAIK this solution is browser compatible. it's even better than {margin-left:auto; margin-right:auto;} in some cases. but there is an other interesting point by centering DOM-elements this way:
e.g. if your whole page-wrapper is centered with {left:50%,...} and the browser window width is smaller than the wrapper you cannot see the whole content by scrolling to left and right. the browser cuts the content. try it...
Try to scroll left and right to see the white left- and right-border...
The other known solution is to set {margin-left:auto; margin-right:auto;} but afaik this just works together with {position:relative;}- not with {position:absolute;}-elements
It's been a long time when I started up with this unconventionally solution...
use this code snippet:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -(height/2);
margin-left: -(width/2);
}
this works even if the parent dimensions change.
The code you have will work - I've used the same approach many times - so long as you know the dimensions of the element you are centering.
Note that you can use the same approach using percentage based widths to work better with responsive layouts.
You're on the right track.
I'm trying to make a fluid grid layout and I've run into a problem with inconsistent width rendering in Opera. In Opera the width of elements are consistently smaller than the other browsers. I'm trying the fluid 960 grid system but if it wont be consistent then I may change to fixed sizes.
Does anyone know how I can get Opera to render the width the same as the other browsers?
Here is the CSS and HTML I'm using for this demo
.show_grid {
background: url(../img/grid.gif) no-repeat center top;
}
html, body{
margin: 0;
padding: 0;
}
.container {
width: 92%;
margin-left: auto;
margin-right: auto;
max-width: 936px;
padding-top: 15%;
}
.box {
width: 15.633%;
background: #006;
color: #999;
margin: 5% .55%
}
<div class="container show_grid">
<div class="box">2 column - browser name</div>
</div>
Opera rounds percent widths but it doesn't round percentage values for paddings and margins.
So, the easy way is to set the width: 15%, and add padding-right:.633%. But doing so, only the block would be bigger visually.
If you want to have it's width fair so all childs would have the same width, you'll need to add another wrapper and add the appropriate negative margin to it. It is calculated by this formula: 100/width*padding, in your case: 100/15*0.633. It would compensate the padding and everything would be cool.
Here is a fiddle with all the variants: http://jsfiddle.net/kizu/8q23d/
— fixed width in pixels, block with width:15.633%, first visual fix and the proper fix at the end.
Dealing with different box models could be very tricky and time consuming.
I definitely suggest you to avoid dirty CSS hacks that will not validate your css files.
You could try to drop the use of percentage values and go for an "elastic" layout.
In this case you specify the min-width and max-width for your block elements.
An article about elastic layout is here and something more here
In alternative you could detect the browser via javascript or via library and use conditional CSS files.
This is my favorite approach when dealing with IE.
conditional css is a library that will help you with that, but there are many more options in the web.
Good luck