When I give max-width of 1440px to a Header, and my whole screen is smaller than 1440px, in the browser this Header takes a width of 920px instead of 1440px.
Why does it do that ?
max-width is just the maximal width an element can have - there is no limit on how small it can be. For that you use min-width.
Try setting width as well as max-width to 1440px. If that doesn't work, add min-width too.
You say your whole screen in smaller than 1440px, it would be logical for the header to take a smaller width, since a width of 1440px is not possible..
Otherwise I don't understand your question very well.. Maybe take a look at padding and margins. Or share your code for a better answer.
Related
I have a with a className container,
if I do this :
.container{
height:100vh
}
whenever I shrink my screen size, for example with dev-tools, the div shrinks as well, how do I stop it from happening? I want it to be full screen always, is that possible?
When I understand your question correctly, then the shrinking of the div when resizing the screen is the correct behaviour. vh stands for viewport height. That means the height stands to the exact relation of the height of your whole screen. If you want the size fixed you have to use px or rem.
the height being 100vh is the correct answer to have a fullscreen height, perhaps u have other properties in child elements that are causing the div to shrink.
I was reading an article explaining the css properties width and max-width and came across this example:
img {
width: 100%;
max-width:700px;}
This says that the fixed width of the image, should take up the entire size of the parent element — if the width of the parent element is explicitly stated, — all hundred percent of it, yet the image should never exceed 700px. It means that the image can be less than 700px, if that suits its situation better (e.g smaller window size) but it should never be more. So there are two conditions here, that the width of the image can be 100% of the parent element if it wants to but it must not never be more than 700px.
But isn't it unnecessary to add the width:100% here? Doesn't max-width:700px imply that the width will be 100% if the parent is less than 700px anyway?
First, width defines the width of a specific element while max-width define the maximum size the element is allowed to have.
Second, width:100% use the parent's width to calculate the current width value whereas max-width:100% use its own original width to calculate the maximum size. So, the image with width: 100% could be larger its original size (scaled base on its parent width). On the other hand, the image with max-width: 100% could be smaller but never be scaled larger its original size (maximum valid width = 100% x original width). That's why it's called fluid image.
Let's say you put width: 700px for an image. When you re-size your screen the image stays stably 700px. Let's say you on a mobile phone and its screen width is less then 700px the image will not fit in the screen. So it will stretch out your page and make it not mobile-friendly. At the same time, when you set max-width:700px it will re-size up to 700px but when the screen goes smaller and the images don't fit in the screen it will automatically re-size it to fit the screen.
As far I understand you want to get the image fit to the size of its parent container with the constraint of not exceeding the width of the image more than 700px.
Then I will say yes it is unnecessary to give "width: 100%;" either way default value for width will get selected i.e. "auto".
Because of this whenever your parent container will be smaller than 700px, your image will fit your container (since "width: auto;").
P.S.-Please refer "object-fit: contain" property of CSS, as that will also help.
What I'm trying to do is same margin between div container on different resolution. I'm using vh as a margin unit between container but it's not responsive like 2vh is ok for 1000px width and greater resolution but it looks bigger between 600px to 999px width resolution . So I opted to use media query but I think this is not efficient is there other way to make the margin looks the same on different resolution without using media query?
Sometimes vh doesn't work as expected. You could try to use percentages but you have to understand it is very hard to get it similar without media queries because of the different ratios in different screens. If you would like it to be a set amount of pixels you can use min-height and max-height in a margin container.
In this following code i can't understand the function of max-width?and my instructor have written:"It sets max-width:1170px, because when you add the left and right padding with the max-width, you get 1200px which is our large device breakpoint." I hope u can reply on me.Thanks in advance
The max-width property defines the maximum width of an element. This means that if the width is calculated dynamically, it will never exceed the max-width value, but it could be any value smaller.
In your instructors example, the max-width + the side padding will add up to the screen width. This ensures the maximum width of the element never exceeds the width of the screen.
Hope that helps.
max-width
The max-width property in CSS is used to set the maximum width of a specified element. The max-width property overrides the width property, but min-width will always override max-width whether followed before or after width in your declaration
Using max-width instead of width in this situation will improve the browser's handling of small windows.
This is important when making a site usable on mobile.
By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it.
While I see the $row-width: emCalc(1000px); in _variables.css, I can't find where the small width is defined for mobile devices. I'm assuming it's just set to 100% but I'd like to play around with changing this.
Your assumption is correct : The row-width variable just sets the maximum width.
The width of the .row is always 100%
When it's a large screen, the width is constrained by the max-width variable, so it's by default 1000px
When it's a small screen (as a mobile device), the .row width is 100%.
I'm assuming it's just set to 100% but I'd like to play around with
changing this.
You may consider to change the breakpoint width, or using different structure (columns?).