This question already has answers here:
How to perform arithmetic operations in CSS?
(3 answers)
Closed 6 years ago.
I have two tables that one in the right side's width is fixed and it is width: 470px. And another one is the rest of the window width. May problem is that if there is a method that one table width is dynamic and with shrinking the window the width of table in right-hand-side is something like:
width:(100% - 470px)
it means window width minus the fixed width of the second table is for the first table.
You need calc.
width: calc(100% - 470px)
Related
This question already has answers here:
How to keep website width fixed (irrespective of screen size)
(4 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Not suitable for this site
So I’m currently working on a basic html web page that requires me to have a static layout and a fixed width of 1000px however when I do that I’m left with space on both the left and right of the page but when it’s on auto my elements such as my nav and other container elements take up the space etc take up the full width. What am I missing ??
Any help would be great! Thanks
I didn't quite understand your question, but I think this is the solution
width:100%;
https://www.freecodecamp.org/news/html-page-width-height
As someone say in the commants, your page is not always x pixel size so It's hard to do but you can still do something like :
body {
width: 1000px;
height: 500px;
}
But the things is that some people have a small screen so they will have a scrollbar or maybe you can use a lot of Breakpoint
This question already has answers here:
HTML / CSS - adjust font-size to fill parent height and width
(5 answers)
Closed 6 years ago.
What I need is the text to apear in its maximum size, withiut wrapping or going outside of the screen. I've tried with #media and changing the font-size, but this got too complicated! What I am trying to achieve is, making the faces at example.com appear at their maximum font-size even on mobile devices. The idea here is to not use media queries...
Thry the snippet to view iframe
iframe {
width: 100%;
height: 100vh;
border: none;
}
<iframe src="https://www.example.com/404.shtml">Your browser doesn't support iframes</iframe>
my initial though would be to use the vw property for the font-size. I have created this fiddle to demonstrate how it works. Resize the render screen to see how the font shrinks as the window gets smaller and grows and it gets bigger. You can use media queries to determine the max font size.
For the no-wrapping just add white-space: nowrap; in your css.
This question already has answers here:
How to resize images proportionally / keeping the aspect ratio?
(20 answers)
Closed 6 years ago.
I have a requirement where the same page can be used by different firms(our clients) and the image on the navbar must be their logo. Now, the logos that I am testing with are all of different size and dimensions.
I tried some ways like setting max height, max width etc, but since the logos themselves come in different sizes with height-width ratio different (say some are square an some are long names with an overall rectangle dimension like 380*200 ).
Now I need to somehow maintain this and still fit these images. Using css or HTML tags to achieve this.
I am currently working with something like this:
<img src="<?php echo $imageUrl?>" style="max-height: 180px;max-width: 40px"></a>
You could try to use percentages in the widths and heights instead of using fixed pixels.
E.g.
id/classofimg{
width:50%;
}
This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 7 years ago.
So with #media screen - you are able to change CSS depending on screen size. I am looking for a way to change the CSS according to Div size
So if
#menu-logo is > 250px {
do this
} or else {
do that
}
Is there any way to do this with CSS ? I'm trying to make my website responsive. Thanks
You can check with regular media-queries at what point your div will be greater then 250px and just use that value in your media-query. Targeting the div itself will need jQuery though.
This question already has answers here:
Web and physical units
(2 answers)
Div width in cm (inch)
(6 answers)
Closed 9 years ago.
Every product in my eshop must be displayed in it's real life size (cm or mm) independent on the resolution my visitor is using to view it.
I'm searching for a solution that works on all browsers.
How can this be done?
How well do mm and cm measurements in css work?
As far as I know, in css you can use cm, mm and in as units for any property that takes a length value, so
height: 100cm;
Will set an element's height to 100cm as measured on screen. However, for a quick test I created a webpage containing the following:
<div style="height: 10cm; width: 10cm; background-color: red">
This div appeared 10cm on one monitor, 8.9cm on another, 6.35cm on a tablet and either 2.05cm or 3.3cm on my phone depending on the orientation. So while you can set absolute lengths in CSS, there really is no guarantee that is what you are going to get. Unfortunately I don't think there are any more accurate alternatives either, although you could always try slaughtering a goat to improve your chances.
the spec