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;
}
Related
Here in this css file I used "background image url" in body and then used another "background image url" in another class named container. But here in .container class I'm facing problem with height attribute. If I use a definite parameter in height like height:500px; then my both two background image (body and container class) is being rendered perfectly.
body{
background: url('../images/body-bg.gif') 50% 0;
font:12px/18px arial;
color: #717171;
margin:0;
padding: 0;
position: relative;
}
.container{
background: url('../images/main-bg.jpg');
width: 100%;
height: 500px;
}
But If I use height:80%/100%..etc or use min-height:80%/100%..etc then only my body background image is shown on the display. In this type of stage how can I solve my problem.
.container{
background-image: url('../images/main-bg.jpg');
width: 100%;
height: 80%;
}
or-
.container{
background-image: url('../images/main-bg.jpg');
width: 100%;
min-height: 100%;
}
Note: Basically I was doing this code from a video and in that video both two images rendered perfectly. And here are no issue with syntax or destination path.
You can't set height of a div in percentage without a valid positioning. Either assign it a position or use height in vh instead of %.
Do note that vh will give you the height of viewport but % will give the height of parent.
If you're assigning absolute position, don't forget to apply relative positioning to it's parent.
The problem is you're telling you container to have height 100% but compared to what? To make relative units work for height the parent needs to have a height defined.
You can use flex-grow as a workaround.
body {
min-height: 100vh;
display: flex;
}
.container {
flex-grow: 1;
}
I can't seem to get the react root div to fill the browser page.
I've tried adding the following CSS, and just about every combination of
html, body {
margin: 0;
height: 100%;
}
.fill-height {
min-height: 100%;
height:auto !important; /* cross-browser */
height: 100%; /* cross-browser */
}
#root > [data-reactroot] { height: 100vh }
You should be able to achieve this by setting height to 100% or 100vh of #root instead of #root > [data-reactroot]. This does depend on the rendered structure of your application. You may also need to set the height on multiple elements depending on how nested things are:
#root {
height: 100vh;
}
Here is a StackBlitz showing the functionality in action. You may need to fork it and update it to match more with the structure of your application, but it may be the only issue is you are targetting a child of #root instead of just #root.
Hopefully that helps!
Ok, so I have a mobile application with Cordova and AngularJS. For the styling I use Less and Bootstrap.
Problem
In the mobile app I have tried to size my divs with percentage (%). But this does not seem to work. I cannot seem to change the following behavior: The divs are as big as the content inside of them. This problem sounds quite easy and I have tried many options on here (stackoverflow) aswell as on the web. Yet I have not found the solution to fix it and it is getting quite annoying.
I have tried
Adding html, body { height: 100% },
Adding html, body, #canvas { height: 100%}
Adding #canvas { min-height: 100% }
Adding html { height: 100% } body { min-height: 100% }
And a lot of other variations. Using px works, but I don't know how big my mobile device is, so that isn't realy handy.. (I also use bootstrap and some media queries for styling).
Example
When I add elements to my div I get the following behavior:
I want to remove that white empty space, but I can only achieve that when using px instead of %.
Less example:
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
#canvas {
min-height: 100%;
}
body {
-webkit-touch-callout: none; //prevent callout to copy image, etc when tap to hold
-webkit-text-size-adjust: none; //prevent webkit from resizing text to fit
-webkit-user-select: node; //prevent copy paste, to allow, change 'none' to 'text'
min-height: 100%;
margin: 0;
padding: 0;
background-color: #cgiColor;
}
.header {
top: 0px;
width: 100%;
height: 5%;
background: #companyColor;
color: #textColor;
}
.incidentContainer {
background: #appBodyColor;
width: 100%;
height: 70%;
}
.footer {
position: absolute;
color: #textColor;
bottom: 0px;
height: 15%;
width: 100%;
background: #companyColor;
}
Extra information
I am using AngularJS, so my application is a single page application. My index.html looks as follows:
<body oncontextmenu="return false" >
<div class="{{ pageClass}}" ng-view ></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="main" src="lib/require.js"></script>
</body>
With of course the standard links to my CSS sheets, and so on.
All the other pages are includes in the 'ng-view' and don't have any or tags. This because they are included.
Solution
The solution was to add the following CSS rule:
div[ng-view]{
height: 100%;
}
This worked, because all divs (except for html & body) are children of this item. Adding the 100% made the div space span to 100% of the screen and thus provides a space for percentage to work.
Credits go to Jai for this answer!
Have you tried to add the following css and set Important attribute
html, body { height: 100% !important }
What seems to me, the directive ng-view is the parent of your application and header, content, footer are loaded in this div. So you have your header div at correct place, your footer is also placed correctly as it is absolutely positioned.
But in case of your content area, that is relative to the ng-view div.
I would recommend you to make it 100% height. Something like:
div[ng-view]{
height: 100%;
}
This most likely is because of the fact that in CSS the 100% is a relative value.
With width the default 100% is the width of the screen, or whatever you are looking at.
Height however does not take the height of the screen as 100%. It needs a solid value.
I think that if you change
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
with
html, body {
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
}
it should work.
The 100vh should set the height of the html to the height of the viewport.
I guess this way works, I have to say though that I myself have not used something to get my page to have a height that is 100% of the screen.
Yay, rendered HTML!
class="incident" is only expanded as large as it needs to be. I believe your fix should be to make that element have a height of 70% (because it will be relative to the whole-page) and then incidentContainer should have a height of 100%.
Percentage heights are relative to the parent element, not the root, so you need to be very aware of any containers, even ones stealthily added by a framework.
Also, if it helps, Jelmergu suggested the vh unit type. This could fit your use case - one "Viewport Height" is equivalent to "1% of the browser's content area". So, 100vh would take up the whole screen. This is true even on deep-level children.
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*/
}
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);