Awesome thanks! The only thing I would add is how important the spaces around the ' + ' are in the calc. It will not perform a calculation if they are not there. Everyone else may know this already, but it bit me for a little bit trying to figure it out.
@Gene Price that's right, you can't also have a space between the calc function and first opening bracket. @@KevinPowell Did you ever experiment with calc and CSS variables? I tried to and it seems that you can define variables to a calculation but you can't calc with the variables. At least I don't know how.
My favorite calc() trick is this one : html{ margin-left: calc(100vw - 100%); } It removes the "windows jumping" when a scrollbar on the right pops in or out. Perfect for variable/interactive layouts.
@@kuranam 2 years late but you don't need calc - you can use `aspect-ratio` (or `object-fit: contain`, though that won't change the height/width, it'll only keep the image undistorted)
I have been coding websites for almost 20 years. watching your videos reminds me i have a lot to learn. thank you for the time, skills and know how you share on every video.
I learned a couple of new css attributes I didn't know about. I didn't even know I can hide the scroll bars without affecting the flow of the contents...
Not only do I have a better understanding of how calc works, but you also answered my (unasked) question about making headline text responsive without so media queries.
That breakout div is great for creating dynamic content. I build cms sites for clients, but the content they enter is always contained in a bootstrap container. This gives me the option of allowing clients to build their own wide block WITHOUT having to break out of the container and re-instating it. Great tip! Thanks, Kev!
Kevin, I want to take this time and opportunity to say a genuine heartfelt thank. Sharing your passion on RUclips is helping me understand how the modern web is built. My sites are responsive with a modern stylish feel now. I even have confidence to secure paid work now. X
The break out container technique is mindblowing to me. I won't have to wrap a div or section or something around the text that I'd like to give a background for.
Calc is great in many places, but sometimes there's simpler solutions. In the case of the big-image, instead of using a "complicated" calc(-50vw + 50%) (which is, arguably, difficult to understand, especially for newcomers), simply use margin: 0 -3em instead. This will also pull the image 3em to the left and 3em to the right (the combined 6em you subtract from your container). One thing to keep in mind when using techniques like these or when working with EM units in general: local font-size changes on an element will override the EM size inherited from parents. If possible, try to make your lives easier by using REM whenever you can.
Using calc(-50vw + 50%) does have the advantage of working within any parent container, no matter the width. You could make it a class to put on things, (almost) regardless of context.
I work for an event app / event website company and we have a left-sidenav that displays on desktop by default with a width of 320px, that can collapse to being around 60px wide. sometimes i need to create a square container so i often find myself using calc functions, or wrapping calcs for max-widths, i had a client the other week who didn't like how when the left-sidenav was collapsed things flexed and stretched, so another useful trick there was width:calc(100vw - 320px); and then wrap that calc function in another calc such as width:calc( calc(100vw - 320px) / 2); so if i have a container with specific info/ a cta it doesn't flex at any point, i can then set it's max width as well so i have this fixed point for larger screen sizes, which if you want to save time could also be made into a css-variable for easier use so you can have --widget-width:calc(100vw - 320px); and use it in the realms of width:calc(--widget-width / 2) or 3 or 4 or etc; and a max width of lets say 1200px, although in this example this is only really used in a media query for min-width tablet and onwards i've found some use to it, especially if you need to make scalable square pieces, then you can do @media(orientation:landscape) { div { width:calc(100vh - 2em); } } and for portrait width:calc(100vw - 2em);
THANK YOU! Just made my image gallery so much easier to handle. Now I can simply mix padding in px's to my img-width in percentage: width:calc(50% - 12px); since I have a 6px padding on each side. Looks exactly as I want it to!
I can definitely see myself using that full width thing. The alternative is to make a whole bunch of divs that are full width with an inner to constrain content when necessary. Calc() rocks!
About the issue with the vw calculations leaving your item to suck up space behind the scrollbar, it's possible to overcome this. If you dont need to worry about IE its fairly simple. The general idea is to calculate the width of the scrollbar using a bit of javascript, then using css custom properties which can be updated by javascript, and used in the margin calculation. Below is a link to a codepen that shows the technique. codepen.io/anon/pen/JVJjzX For those who doesn't want to go look, this is what the margin expression would look like. margin: 0 calc(-50vw + (var(--scrollbar-width) / 2) + 50%); In english this would translate to: "Move it half of the viewports width out. Move it in by whatever the scrollbar-width divided by 2 is. Then move it further in by half of its own width" In order to calculate the scrollbar width you generate a div, with a width that is greater than whatever the scrollbar could possibly be (say 100px) then you get that divs offsetWidth (outer width) and the clientWidth (innerWidth) By subtracting those two numbers, you have the width that the scrollbar occupies. This can then be used to update the css custom property through document.documentElement.style.setProperty. A working example can be seen in the codepen linked above. Having the width of the users scrollbar can be quite handy :-)
Awesome :) I normally use calc() for calculating the height of a container/div and give overflow-y: auto for getting scroll. It helps me in calculating dynamically according to the other content on the page. In your video, I liked the way how we can get the section out from container and styling those. pretty cool.
C'est la vie, c'est incroyable ! thanks from france... - Getting out of the container is great. - Object-fit (i didn't know about !) is huge. Merci chef.
The, er, hidden gem here is the 'overflow-x:hidden' to sort out the 100vw issue, which is going to fix some mobile SEO issues on a couple of client's sites for sure. Thanks for this video!
Great Tipps there, Thank you! Especially the font-size trick is really handy. I want to make a suggestion though: To position stuff it’s far less expensive on the rendering (performance) to use transforms rather than margin. You could litterally See the stuttering when resizing the viewport. Margin affects the layout while transforms only touch composite layers.
4:50 when he uses max-width: 100vw, how come it only fills up the right side and not the entirety of the viewport width? Is it because some other property (like margin-left) overrides it?
I came here to kill some time watching some nice tips & tricks and that outside the box thing actually solved one of my biggest pains ever. Thank you so much!
Hey Im trying to find out how Facebook new design calcs the widh of images containers on their Newsfeed. If you inspect the photo you will see parent div who haves for example if the original width of image is 500x321 then the calc is width: calc(-506.231px + 155.763vh); I can't find out where the "-506.231px" and 155.763vh; are coming from....
Having been out of web development for over 10 years, calc is something I wished for back in the day and the vw/vh values. Now having to relearn css again with new updated tricks like this it would be nice to know what browsers support this? I don't want to be using features like this if e.g IE / Edge don't support it.
caniuse.com is awesome, gives the browsers, as well as relative usage. Nice thing with this is, even if it doesn't work in IE, it won't break your site, unlike some other properties
Is there a way to cap the font size? It'd be easy if max() was still available. Without that, how do you prevent a huge font on an 8K monitor? :) I use a resize function to re-calculate font sizes, and if not for the maximum font size issue I'd be able to replace the resize function with calc.
Thank you kevin,I learnt a new trick today. can we use CSS variables in Calc() like below? ex: font-size: calc( var(--title-fontSize) - 8px); I tried but not working for me. thanks.
Is it possible to use calc() to calculate height based on width? I mean, I'd like to set height = width or height = 40% of width. Is it even possible in pure CSS or SASS?
Calc is really useful, but if you're looking to make grid systems CSS Grid is super useful and easy to pick up. You can also easily reflow content with media queries for mobile.
50% is 50% of it's width before the calculation is done. Basically, it's moving the margin to 50%, so right dead in the middle of the parent, and then it's pulling it back the other way 50vw, so both sides get pulled out to the edge of the screen.
Will you please help me out i have created a product webpage every product has share button so when i click on one product share button so all the product expand there social link this the problem
Sounds like they are all being targeted, instead of the individual ones. Head over the community (link in description), it'll probably be a lot easier to trouble shoot.
Hi Kevin, I was researching on calc() and I realized that calculation can still work with or without the word calc() in the css. And I see from the start of your video, you also omitted it from the width. So I am wondering if you can tell me what is the implications if we omitted it as I couldn't find any website that talks about that. Thanks
Just came across this video and subscribed t0 your channel. Really cool content! I will have to play around with it. As a few people here said in the comments, I came for one thing and learned a bunch in the process. Do you know how supported this would be in HTML emails? Most of the CSS I write is tailored to that and I was curious if you had tried it. Thanks.
It's an old Dell mechanical keyboard. I don't know the model and I'm not on my computer right now, but if I don't answer this now I probably won't see your comment again :\. I did a quick google search, found some that look similar, but I didn't see my exact model
Hey Kevin, great video. I have a question (not related to calc though), what do you think of using % units (e.g. font-size: 140%; ) for setting fonts of different elements, after setting main font in html selector as font-size: 16px?
Thanks for great tuts. I just begin to learn css, could anybody please tell me why that margin:0 calc(-50vw) will move image out of left, instead of out of BOTH of left and right? - I think margin:0 calc(-50vw)=margin:0 calc(-50vw) 0 calc(-50vw).
The margins are getting pulled in both directions (if you did it with a div with background color on it, it would make more sense). You just don't see it on the right side because it isn't stretching the image out :)
Awesome thanks! The only thing I would add is how important the spaces around the ' + ' are in the calc. It will not perform a calculation if they are not there. Everyone else may know this already, but it bit me for a little bit trying to figure it out.
Good point Gene, I probably should have talked a bit more about the very basics of it right off the top before diving in deeper.
@Gene Price that's right, you can't also have a space between the calc function and first opening bracket.
@@KevinPowell Did you ever experiment with calc and CSS variables?
I tried to and it seems that you can define variables to a calculation but you can't calc with the variables. At least I don't know how.
@@franktielemans6624 Sure you can calc with variables/custom properties.
jsfiddle.net/aLs8zv5h/
you literally saved my life. i was struggling for 2 days . huge thanks
My favorite calc() trick is this one : html{ margin-left: calc(100vw - 100%); }
It removes the "windows jumping" when a scrollbar on the right pops in or out. Perfect for variable/interactive layouts.
How could I use Calc, to preserve the height and width of a image. I am making an ePub, and the picture pass to another Page and it show clipped.
@@kuranam 2 years late but you don't need calc - you can use `aspect-ratio` (or `object-fit: contain`, though that won't change the height/width, it'll only keep the image undistorted)
That's an awesome trick. I tested it today and even made it fluid. It may look hackish but it works as expected now.
`--wrap-padding: calc(
32px + (128 - 32) * (100vw - (var(--min-width) * 1px)) / (var(--max-width) - var(--min-width))
);
width: calc(100vw - var(--wrap-padding) - 17px);
max-width: 1200px;
margin: 0 auto;
@media screen and (max-width: 320px) {
width: calc(100vw - 2rem - 17px);
}
@media screen and (min-width: 1200px) {
width: calc(100vw - 8rem);
}`
I have been coding websites for almost 20 years. watching your videos reminds me i have a lot to learn. thank you for the time, skills and know how you share on every video.
The video is about calc(), But I also learned about viewport and vh and vw. This really saved a website I had to restore.
Samesies
I learned a couple of new css attributes I didn't know about. I didn't even know I can hide the scroll bars without affecting the flow of the contents...
Not only do I have a better understanding of how calc works, but you also answered my (unasked) question about making headline text responsive without so media queries.
That breakout div is great for creating dynamic content. I build cms sites for clients, but the content they enter is always contained in a bootstrap container.
This gives me the option of allowing clients to build their own wide block WITHOUT having to break out of the container and re-instating it.
Great tip! Thanks, Kev!
Kevin, I want to take this time and opportunity to say a genuine heartfelt thank. Sharing your passion on RUclips is helping me understand how the modern web is built. My sites are responsive with a modern stylish feel now. I even have confidence to secure paid work now. X
I was introduced to object-fit with this video, and the break out of container technique was clever!
The break out container technique is mindblowing to me. I won't have to wrap a div or section or something around the text that I'd like to give a background for.
developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Object-fix is amazing, I can't believe I spent so long making divs with image backgrounds like a sucker.
The calc() function is really awesome indeed! Great tutorial Kevin! 👍👍👍👍👍👍👍👍👍👍
Calc is great in many places, but sometimes there's simpler solutions. In the case of the big-image, instead of using a "complicated" calc(-50vw + 50%) (which is, arguably, difficult to understand, especially for newcomers), simply use margin: 0 -3em instead. This will also pull the image 3em to the left and 3em to the right (the combined 6em you subtract from your container). One thing to keep in mind when using techniques like these or when working with EM units in general: local font-size changes on an element will override the EM size inherited from parents. If possible, try to make your lives easier by using REM whenever you can.
Using calc(-50vw + 50%) does have the advantage of working within any parent container, no matter the width. You could make it a class to put on things, (almost) regardless of context.
To prevent the horizontal scrolling issue, I do the following with css calc:
calc(100% + calc(100vw - 100%))
Hrm, never would have thought of that, cool :)
Calc in Calc bad work for IE and Safari
which rule do you apply that to please?
@@radoslawzielinski9016 to the html element or body element i guess
I work for an event app / event website company and we have a left-sidenav that displays on desktop by default with a width of 320px, that can collapse to being around 60px wide. sometimes i need to create a square container so i often find myself using calc functions, or wrapping calcs for max-widths, i had a client the other week who didn't like how when the left-sidenav was collapsed things flexed and stretched, so another useful trick there was width:calc(100vw - 320px); and then wrap that calc function in another calc such as width:calc( calc(100vw - 320px) / 2); so if i have a container with specific info/ a cta it doesn't flex at any point, i can then set it's max width as well so i have this fixed point for larger screen sizes, which if you want to save time could also be made into a css-variable for easier use so you can have --widget-width:calc(100vw - 320px); and use it in the realms of width:calc(--widget-width / 2) or 3 or 4 or etc; and a max width of lets say 1200px, although in this example this is only really used in a media query for min-width tablet and onwards i've found some use to it, especially if you need to make scalable square pieces, then you can do @media(orientation:landscape) { div { width:calc(100vh - 2em); } } and for portrait width:calc(100vw - 2em);
Really awesome, I remember trying the calc( ) function, it was tricky, but it now clear and simple
Awesome! I've been working with CSS for quite a while now, but this feature was completely off my radar. This will be VERY useful for me, thank you!
I been looking everywhere for these very examples. Thanks!
Awesome video. I stumbled upon it by accident and it solved a problem I had for a long time and thought it could not be solved. Thanks! Great channel!
Perfect!!! I loved what you did with the font-size!
THANK YOU! Just made my image gallery so much easier to handle. Now I can simply mix padding in px's to my img-width in percentage: width:calc(50% - 12px); since I have a 6px padding on each side. Looks exactly as I want it to!
This is sooo helpful, honestly. I didn't even look specifically for this but I'm glad it poped up in my recommended section
Life changing for images and headings!
I can definitely see myself using that full width thing. The alternative is to make a whole bunch of divs that are full width with an inner to constrain content when necessary. Calc() rocks!
very calm and accurate explanation :) really like your videos , short ,and professional
The black & white picture on 0:48 is the HQ of ABN AMRO in Amsterdam.
About the issue with the vw calculations leaving your item to suck up space behind the scrollbar, it's possible to overcome this.
If you dont need to worry about IE its fairly simple.
The general idea is to calculate the width of the scrollbar using a bit of javascript,
then using css custom properties which can be updated by javascript, and used in the margin calculation.
Below is a link to a codepen that shows the technique.
codepen.io/anon/pen/JVJjzX
For those who doesn't want to go look, this is what the margin expression would look like.
margin: 0 calc(-50vw + (var(--scrollbar-width) / 2) + 50%);
In english this would translate to:
"Move it half of the viewports width out.
Move it in by whatever the scrollbar-width divided by 2 is.
Then move it further in by half of its own width"
In order to calculate the scrollbar width you generate a div, with a width that is greater than whatever the scrollbar could possibly be (say 100px)
then you get that divs offsetWidth (outer width) and the clientWidth (innerWidth)
By subtracting those two numbers, you have the width that the scrollbar occupies.
This can then be used to update the css custom property through document.documentElement.style.setProperty.
A working example can be seen in the codepen linked above.
Having the width of the users scrollbar can be quite handy :-)
Yes! I've been waiting for this one. THANK YOU! Haven't watched it yet but I know it will be good!
Very nice tutorial. First time I've ever seen a clear practical use for the calc function.
You are a talented master teacher. Kudos. This tip was useful to me immediately.
How could I have been living my life without this?
Really good function. Congratulations on your video!
Tried to use vw as font size, but it was horrible on small screen. This "+ rem" will really help. Thanks Kevin!
This is brilliant, another tool in the belt. Thanks so much!
Subscribed! That vw and break out container image is super cool
Awesome :)
I normally use calc() for calculating the height of a container/div and give overflow-y: auto for getting scroll.
It helps me in calculating dynamically according to the other content on the page.
In your video, I liked the way how we can get the section out from container and styling those. pretty cool.
I always wanted to know how fittext worked. Very cool.
5:00 forward the fun starts. I subscribed and hit that bell
Very good Kevin, Thank you!
*Dear Kevin, your lessons are awesome! Hello from Ukraine!*
C'est la vie, c'est incroyable ! thanks from france...
- Getting out of the container is great.
- Object-fit (i didn't know about !) is huge.
Merci chef.
De rien! And if it's easier for you to write comments in French, go for it. I can read it no problem, I just can't write it to save my life 😂
"Object-fit" is not supported by edge, so you might wait until MS switches to webkit engine.
It's supported by Edge for images, just not video
Ur the best, Kevin... I've learnt a long more from this video than just the calc()... Many thanks... 😁
The, er, hidden gem here is the 'overflow-x:hidden' to sort out the 100vw issue, which is going to fix some mobile SEO issues on a couple of client's sites for sure. Thanks for this video!
My god, this was such a lifesaver for me...
Awesome video.. that container close and open was a bit too much.. now got a solution with this video. Thanks a million!
Great Tipps there, Thank you!
Especially the font-size trick is really handy.
I want to make a suggestion though: To position stuff it’s far less expensive on the rendering (performance) to use transforms rather than margin. You could litterally See the stuttering when resizing the viewport.
Margin affects the layout while transforms only touch composite layers.
Yes, i noticed the stuttering too. Can you share the transform code to do the same thing?
i used it for Containers, which are on the same Level. for example: width: calc(100% / 3) dir Three Containers
Really nicely explained, Kevin.
Thank you!
Thank you Kevin!
4:50 when he uses max-width: 100vw, how come it only fills up the right side and not the entirety of the viewport width?
Is it because some other property (like margin-left) overrides it?
Great info, as usual.
I came here to kill some time watching some nice tips & tricks and that outside the box thing actually solved one of my biggest pains ever. Thank you so much!
So glad to hear that Marvin!
wow.... loved it
you are great
Cool one :-)
Thanks @Kevin
I've been playing with calc() and custom properties to generate responsive font sizes while being able to set a min/max font size. Eg.
:root {
// font sizes
--fsMin: 16;
--fsMax: 26;
// viewport widths
--vwMin: 420;
--vwMax: 1280;
}
html {
font-size: calc((var(--fsMin) * 1px) + (var(--fsMax) - var(--fsMin)) * (100vw - (var(--vwMin) * 1px)) / (var(--vwMax) - var(--vwMin)));
@media screen and (max-width: 420px) {
font-size: calc(var(--fsMin) * 1px);
}
@media screen and (min-width: 1280px) {
font-size: calc(var(--fsMax) * 1px);
}
}
----
codepen: codepen.io/lewisvrobinson/pen/VWoNLP?editors=0100
Really cool. That initial font-size calculation broke my head a little, lol. Works super well!
Great video! I learned a lot!
Thank you for the awesome video Kevin 🙏🏻🙏🏻
calc() is so complicated though 😵💫😵💫
This was very informative! Thank you for sharing!
Hey Im trying to find out how Facebook new design calcs the widh of images containers on their Newsfeed. If you inspect the photo you will see parent div who haves for example if the original width of image is 500x321 then the calc is width: calc(-506.231px + 155.763vh); I can't find out where the "-506.231px" and 155.763vh; are coming from....
I'm about to take a deep dive into the math functions that are available inside calc(), and wonder if you've already done a tutorial on those?
Having been out of web development for over 10 years, calc is something I wished for back in the day and the vw/vh values. Now having to relearn css again with new updated tricks like this it would be nice to know what browsers support this? I don't want to be using features like this if e.g IE / Edge don't support it.
caniuse.com is awesome, gives the browsers, as well as relative usage. Nice thing with this is, even if it doesn't work in IE, it won't break your site, unlike some other properties
@@KevinPowell Excellent, thanks for the link to the site - never heard of it before :)
Shared and liked! Thank you for sharing this!!!
I always learn at least one useful thing when watching your videos.
This is Terrific!! Thank You!
Thank you Ross! Good video
Is there a way to cap the font size? It'd be easy if max() was still available. Without that, how do you prevent a huge font on an 8K monitor? :) I use a resize function to re-calculate font sizes, and if not for the maximum font size issue I'd be able to replace the resize function with calc.
I really wish we had that! And maybe one day, I've heard talk, but for now a media query gets the job done
Thank you for giving me something new to love!
Thx so much for this tutorial... and your other ones as well 🤘
Object fit, unreal!
Thank you kevin,I learnt a new trick today.
can we use CSS variables in Calc() like below?
ex: font-size: calc( var(--title-fontSize) - 8px);
I tried but not working for me.
thanks.
Great tutorial. Thanks!
Almost didn't click on this video, I'm glad i did.
awsome mate! thanks a lot!
Could you tell us how to start html and css for website templates in psd.. How to aprouch
I have a few series where I do that! Look for my 'building a responsive page' type series.
Can calc use the existing value of an element property?
Awesome stuff!
Is it possible to use calc() to calculate height based on width? I mean, I'd like to set height = width or height = 40% of width. Is it even possible in pure CSS or SASS?
Sir You have to make new layout on topics calc() thanks
when i declare width: clac() its is necessary to declare width or not i am confuse sir
Hi Kevin, please make video on RFS how it works? And how to use it ?
Calc is really useful, but if you're looking to make grid systems CSS Grid is super useful and easy to pick up. You can also easily reflow content with media queries for mobile.
CSS Grid is amazing :D
margin: 0 calc(-50vw + 50%)
is 50% mean 50% of its width wich is equal to 100vw?
so 50% - 50% = 0?
is 50% mean 50% of the width of its container?
50% is 50% of it's width before the calculation is done. Basically, it's moving the margin to 50%, so right dead in the middle of the parent, and then it's pulling it back the other way 50vw, so both sides get pulled out to the edge of the screen.
using calc with big fonts is super useful ;)
Will you please help me out i have created a product webpage every product has share button so when i click on one product share button so all the product expand there social link this the problem
Sounds like they are all being targeted, instead of the individual ones. Head over the community (link in description), it'll probably be a lot easier to trouble shoot.
@@KevinPowell there is an app which is installing right
@@KevinPowell i have join that now
Thanks for this, learned something new :)
Hi Kevin, I was researching on calc() and I realized that calculation can still work with or without the word calc() in the css. And I see from the start of your video, you also omitted it from the width. So I am wondering if you can tell me what is the implications if we omitted it as I couldn't find any website that talks about that. Thanks
Cool tricks, thanks! :)
As a calc believed, thank you!
Very useful function
Amazing, best web tutorials on yt!! Please Kevin can you do a pro video about the scss mixins?
Got it on my list 😁
this one is awesome...!!
really interesting!!!! will be having a play! :)
o_o dude, you really know about tracks. Thanks ;)
Awesome thank you so much!
How to cut the image diagonally?
clip-path is probably the easiest :)
when i set max-width: 100vw; it doesn't take 100vw ?
it takes 100% of the container not document width
can someone tell me why
What's the width? Max width is the biggest it can get, it can be smaller. Min-width would be the smallest it's allowed to be
but it worked with div
@@KevinPowell hi thank you and now when i set the min-width to 100vw it takes 100vw and not 100% of its container
awesome....i had no choice but to subscribe...great content
Thanks for the sub, glad you liked it :)
Just came across this video and subscribed t0 your channel. Really cool content! I will have to play around with it. As a few people here said in the comments, I came for one thing and learned a bunch in the process. Do you know how supported this would be in HTML emails? Most of the CSS I write is tailored to that and I was curious if you had tried it. Thanks.
Thanks for your hard work and dedication for us! Nice tutorials! May I know which keyboard are you using?
It's an old Dell mechanical keyboard. I don't know the model and I'm not on my computer right now, but if I don't answer this now I probably won't see your comment again :\. I did a quick google search, found some that look similar, but I didn't see my exact model
@@KevinPowell Thanks for your swift response! Don't worry! I loved your tutorials!
awesome vid :)
I didnt know css had function
It seems that i have a lot of ground to cover, since none of the courses i've taken mentioned that
Hey Kevin, great video. I have a question (not related to calc though), what do you think of using % units (e.g. font-size: 140%; ) for setting fonts of different elements, after setting main font in html selector as font-size: 16px?
here is another nice use. goes along with some of what was done here
css-tricks.com/snippets/css/fluid-typography/
Thanks for great tuts. I just begin to learn css, could anybody please tell me why that margin:0 calc(-50vw) will move image out of left, instead of out of BOTH of left and right? - I think margin:0 calc(-50vw)=margin:0 calc(-50vw) 0 calc(-50vw).
The margins are getting pulled in both directions (if you did it with a div with background color on it, it would make more sense). You just don't see it on the right side because it isn't stretching the image out :)
Thanks for your help! I need some time, setting up a snippet to test this.