This is probably pretty simple, but I can't seem to figure it out or find an answer.
I have an html element <div class="box">
This element has a set rule in its original style sheet :
.box {
width: 40%;
}
I'm using a Custom CSS sheet that overwrites the original stylesheet without touching it.
I need to change this rule to :
.box {
max-width: 40%;
}
So basically how do I add this new rule, but cancel the old one ??
Could it be something like ? :
.box {
width: 0;
max-width: 40%;
}
??
You can reset to the automatic (default) width. A width with the value of auto tells the browser to calculate the width based on the other properties constraining the element.
.box {
width: auto;
max-width: 40%;
}
To reset the width to what it would be by default, set the value to auto. So, your overwriting CSS rules would be:
width: auto;
max-width: 40%;
If you set the width to 0, then your box wouldn't even display. Max width is just what it sounds like - the widest the element can be, but it can also be any width less than that. So, setting a maximum width of 40px but a width of 0px will cause the element to have a width of 0px.
Normally the CSS rules work as the name says in cascade mode so you can do another .box in a different file and then link that file to the document, but remember in order to the rule to apply the new document must be the one to be linked to.
Also you can try in the same CSS document something like this:
.box {
max-width: 40% /*Change this value to the one you want*/
}
Related
I'm using a Wordpress Theme and now need to customize one of its elements styles. (that element is automatically showing our tours)
Right now, the style is:
.tourmaster-tour-grid .tourmaster-tour-content-wrap {
min-height: 250px;
}
I assigned a custom CSS class to the element: hp_tour_el. And I changed it to:
.hp_tour_el .tourmaster-tour-grid .tourmaster-tour-content-wrap {
min-height: 160px;
height: 130px;
}
But it didn't change anything.
I finally figured it out th issue is you are not setting min-height
which is 250px while you are setting height to 170px which is less
then min so set min-height to auto and then use heightto your
desire value
.hp_tour_el .tourmaster-tour-content-wrap {
height: 140px;
min-height: auto;
}
In my site I would like that all my products have the same height but variable width.
I tried it by UI, but it didn't work.
Any idea how to do it with CSS?
Thanks
Like mnemosdev said, only slightly more complex ;)
You can style the li items like this:
.fusion-carousel .fusion-carousel-item {
height: 200px; /* set to your liking */
width: auto !important; /* important needed to override inline style */
}
but then you'll see the images get really large. So style them:
.fusion-carousel .fusion-carousel-item img {
height: 200px; /* set to your liking */
width: auto;
}
You actually do not need to style the li items, so start with the images, then adjust to your liking.
Your CSS should have something like
.myCSSClass {
width: auto;
height: 100px; /* Instead of a 100px use the value you want */
}
EDIT (I can't comment on post yet, hence I write my comment here):
With wide images, since you are losing the ratio, I guess you could use some code snippet like bootstrap to make images responsive. If your image is set as a background from CSS you can use the background-size set to cover. (http://www.w3schools.com/cssref/css3_pr_background-size.asp)
I have set an image with the css set to a max-height of 220px and a height of 100%.
That should set (this) image width to 175px and height to 220px. Which works fluently in Firefox and Internet explorer but in Chrome (desktop, tablet & smartphone) it sets the height to 220px but the width(!) to 220px as well. Why is this, is this some kind of bug in Chrome or am I just missing something here.
Weird part is, that if you'll remove the height:100% part so you are only left with the max-height:220px, this problem does not occur.
See a more detailed example below
figure {
width: 100%;
max-height: 220px;
}
a {
width: 100%;
display: inline-block;
text-align: center;
}
img {
height: 100%;
max-height:220px;
}
http://jsfiddle.net/be5jT/ JS Fiddle Example
What's Going On:
If you use the inspector tool, the browsers are adding width:auto;, because no width rules are declared. I've researched a bit and I can't find any reason as to WHY, but it comes down the fact that Chrome and Firefox calculated "width:auto" differently. Firefox is calculating based on proportional, and Chrome is displaying native.
I've checked the CSS2.1 Width spec, and since we are talking about an image which is inline, we have a large number of conditions to check for. The one that I think applies here is:
Otherwise, if 'width' has a computed value of 'auto', and the element
has an intrinsic width, then that intrinsic width is the used value of
'width'.
Source - http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
If I'm reading it right, that means that Chrome is technically correct, even though Firefox's method ends up looking better.
Alternative Fix Method:
lili2311's answer will work, but then you'd have to declare the width, which means that you'd have to use images which are the same proportions. You could also remove the height:``00%, which you already know. A third method would be to give the a a height:100%, change the max-height:220px to height:220px on the figure, and then remove the max-height from the img. This lets you only declare 220px once.
Code:
figure {
width: 100%;
height: 220px;
}
a {
width: 100%;
height:100%;
display: inline-block;
text-align: center;
}
img {
height: 100%;
width:auto;
}
Working Demo:
You no need to add height, set max-height only
DEMO
img {
max-height:220px;
}
Setting max-width as well fixed the issue for me in Chrome:
img {
max-height:220px;
height: 100%;
max-width:175px;
}
Demo: http://jsfiddle.net/be5jT/2/
I have an img attribute in my HTML. I would like for the max-width of this element to be equal to the width of the body minus a number, say 60.
How would I do this? I've tried this:
img
{
max-width:body.width - 60;
}
But it seems that the element width is set to 60 instead.
Any suggestions?
You can perform calculations right in the CSS itself, using the calc function, which would look like this in your example:
img
{
max-width: calc(100% - 60px);
}
It's important to note though that this it's still an "experimental" feature, but current support is surprisingly good. You can find out more about browsers support here:
http://caniuse.com/#feat=calc
You will be able to do it with the calc() function.
#someDiv {
width: calc(100% - 60px);
}
Yes, you can! But you won't able to get the body's width you'll only able to use literal values (if you know the width of the body, use that value. If you want a "liquid" solution, use percentage values on the body element.
In a close future, we can do this using the attr() function. For example:
img { width: calc(attr(body.width) - 200px); } /* This is an idea */
Check this link.
You can do that with the calc() function
Check this Fiddle
Be careful! Respect the spaces inside the function!
This won't work:
img { height: calc(100px-50px) }
The above example would work if you respect the spaces:
img { height: calc(100px - 50px) }
You can use CSS padding:
img {
width:100%;
padding: 0 30px;
}
I thought this was a simple fix:
body
{
height: 1054px;
}
html
{
height: 1054px;
}
Wouldn't this set the max height of the page to 1054px? I have also tried these workarounds but they didn't work with what I wanted:
html
{
overflow: hidden;
}
<body><table id = "myTable"><tr><td> ..... </tr></td></body>
#myTable
{
height: 100%;
}
How do I set an absolute height for a webpage? Also I am more interested in why the body and html height calls wouldn't work. I do a lot of position: relative calls, would that have an effect on it?
width and height do set absolute widths and heights of an element respectively. max-width, max-height, min-width and min-height are seperate properties.
Example of a page with 1054px square content and a full background:
html {
min-width: 100%;
min-height: 100%;
background-image: url(http://www.example.com/somelargeimage.jpg);
background-position: top center;
background-color: #000;
}
body {
width: 1054px;
height: 1054px;
background-color: #FFF;
}
However, since you seem to be table styling (urgh), it would probably be far more sensible to set the height of the table to 1054px and let the body adjust itself automatically to encompass the entire table. (Keep the html style proposed above, of course.)
Good question. I’m not sure, but have you tried using a single <div> (or <section>) inside <body>, and setting the width, height and overflow: hidden on that? Browsers might give special treatment to <html> and <body>.
Did you try setting the CSS margin of body to 0? Otherwise there will be some amt (depending on browser) of margin that is included in your page height (and width) but isn't controlled by the height style;
In CSS:
body: { margin: 0; }
IN jQuery:
$('body').css('margin', 0);