I'm pretty new to coding so it may be that I do not understand what I'm doing. I've tried every bit of code advice given on this website that seems to pertain to my situation and I cannot get results!
My carousel sliders are outside my images and I need them in/on my images. I want them the size they currently are so viewers do not have to scroll up and down to view my entire picture. You can view my predicament at http://mirandarodgers.com/lenoxhouse.html
Like I said, I've tried everything under the sun. Currently my code just says:
.carousel .item{
min-height: 525px; /* Prevent carousel from being distorted if for some
reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
position: absolute;
min-width: 100%;
height: 525px;
max-width: none;
}
I'm ashamed of how much of a hack this is, but it might help you out:
.right {
right: calc(100vw / 2 - 374px);
}
.left {
left: calc(100vw / 2 - 374px);
}
So to solve this I gave both the images and the .carousel a fixed max-height (I used 400px).
.carousel .item img,
.carousel {
max-height: 400px;
}
You vertical images will scale to a height of this value.
You can play around with different max-height values and even have the height depend upon the screen size using CSS Media Queries.
Whats happening is that the slider images are aligned to the sides of the actual carousel itself, if you want to restrict the size of the carousel set a max-width on it. This is because the size of your images cannot fit the width/height of the carousel and there isn't any code for resizing the img or the carousel. If you work on the resizing of your elements it should solve the problems you are having and try to find better images that are roughly the same dimensions or the carousel will expand/shrink unexpectedly if it isn't handled correctly.
I added the following to .carousel and it looked much better on the site.
.carousel {
max-width: 70%;
position: relative;
margin: auto;
}
Also i would add an img tag with
img {
max-width:100%
}
And this
.carousel .item {
max-height: 525px;
}
I'm stuck with displaying a React component named "home" that take 100% of the height of my screen.
Whatever I use CSS or React inline style it doesn't work.
In the example below, html, body and #app are set to height: 100% in CSS. For .home I used inline style (but whatever I used CSS or inline style is the same):
The issue seems to come from <div data-reactroot data-reactid='1'> that is not set with height: 100%.
If I hacked it with Chrome developer tool, it's work:
So what is the proper way to display a full height component in React ?
Any help is welcome :)
html, body, #app, #app>div {
height: 100%
}
This will ensure all the chain to be height: 100%
You could also do:
body > #root > div {
height: 100vh;
}
try <div style = {{height:"100vh"}}> </div>
It annoys me for days. And finally I make use of the CSS property selector to solve it.
[data-reactroot]
{height: 100% !important; }
Despite using of React here - elements layout is completely html/css feature.
The root cause of the issue is in how height property in css works. When you are using relative values for height (in %) - this means that height will be set in relation to its parent.
So if you have a structure like html > body > div#root > div.app - to make div.app 100% height all its ancestors should have 100% height. You may play with next example:
html {
height: 100%;
}
body {
height: 100%;
}
div#root {
height: 100%; /* remove this line to see div.app is no more 100% height */
background-color: indigo;
padding: 0 30px;
}
div.app {
height: 100%;
background-color: cornsilk;
}
<div id="root">
<div class="app"> I will be 100% height if my parents are </div>
</div>
Few arguments:
Usage of !important - despite some time this feature is useful in ~95% of cases, it indicates a poor structure of html/css. Also, this is not a solution to the current problem.
Why not position: absolute. Property positon is designed to change how the element will be rendered in relation to (own position - relative, viewport - fixed, nearest parent whos position is not static - absolute). Ans despite position: absolute; top: 0; right: 0; bottom: 0; left: 0; will result in the same look - it also pushes you to change parents position to something not static - so you need to maintain 2 elements. That also causes parent div be collapsed in a line (0-height), and inner - full screen. That makes confusion in element inspector.
I managed this with a css class in my app.css
.fill-window {
height: 100%;
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
}
Apply it to your root element in your render() method
render() {
return ( <div className="fill-window">{content}</div> );
}
Or inline
render() {
return (
<div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
{content}
</div>
);
}
#app {
height: 100%;
min-height: 100vh;
}
Always full height of view min
While this may not be the ideal answer but try this:
style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}
It keeps the size attached to borders which is not what you want but gives you somewhat same effect.
body{
height:100%
}
#app div{
height:100%
}
this works for me..
<div style={{ height: "100vh", background: "#2d405f" }}>
<Component 1 />
<Component 2 />
</div>
Create a div with full screen with background color #2d405f
I had the same issue displaying my side navigation panel height to 100%.
My steps to fix it was to:
In the index.css file ------
.html {
height: 100%;
}
.body {
height:100%;
}
In the sidePanel.css (this was giving me issues):
.side-panel {
height: 100%;
position: fixed; <--- this is what made the difference and scaled to 100% correctly
}
Other attributes were taken out for clarity, but I think the issue lies with scaling the height to 100% in nested containers like how you are trying to scale height in your nested containers. The parent classes height will need to be applied the 100%. - What i'm curious about is why fixed: position corrects the scale and fails without it; this is something i'll learn eventually with some more practice.
I've been working with react for a week now and i'm a novice to web developing, but I wanted to share a fix that I discovered with scaling height to 100%; I hope this helps you or anyone who has a similar issue. Good luck!
For a project using CRNA i use this
in index.css
html, body, #root {
height: 100%;
}
and then in my App.css i use this
.App {
height: 100%;
}
and also set height to 100% for a div within App if there is one eg-
.MainGridContainer {
display: grid;
width: 100%;
height:100%;
grid-template-columns: 1fr 3fr;
grid-template-rows: 50px auto;
}
Try it to solve your problem
<div style = {{height:"100vh"}}> </div>
Adding this in the index.html head worked for me:
<style>
html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>
I had trouble until i used the inspector and realized react puts everything inside a div with id='root' granting that 100% height along with body and html worked for me.
CRA has a #root div to which we render our react app, so it should also be considered a parent div and give appropriate height according to your need. This answer is based on my experience with a similar situation and giving 100% height to #root helped me fix the height issue with one of it's child element.
This depends on the layout of your app, in my case the child was not able to takeup the given height because #root(parent) div had no specified height
Funny how this works since I thought html was the one with not full height, turns out it was the body.
Just add the below css in index.css:
body{
height: 100%;
}
There is an existing body tag? Add it in there!
I'm currently trouble shooting in NextJS 13 & Tailwind to achieve this.
There's an additional layer of < div>'s that I'm unable to locate generated from Next's new AppDir.
One way to trouble shoot that nobody mentioned, which is easy to overlook is:
Open your Web Dev Tools and modify each ancestor to height:100% or in Tailwind 'h-full' and you'll save time to see if height full is the appropriate solution for your use case. I was quickly able to find out my footer component overlaps my div with this method instead of wasting time.
Edit: Reason for Next 13 user https://github.com/vercel/next.js/issues/42345
try using !important in height. It is probably because of some other style affecting your html body.
{ height : 100% !important; }
also you can give values in VP which will set height to viee port pixel you mention likeheight : 700vp; but this wont be portable.
Somehow my image carousel don't show anything. It's supposed to show a full sized image. If I don't set DOCTYPE to html5, it works just fine. Any ideas from looking at the source?
http://putten.evisio.no/
Remove the height: 100%; rule in your child theme's CSS # line 164.
And add
.carousel-inner{
width: 100%;
height: 100%;
}
#myCarousel {
min-height: 100vh;
}
to it.
I want to scale an image with CSS following these rules:
if (containerWidth/containerHeight >=imgWidth/imgHeight) --> img { width: 100% }
if (containerWidth/containerHeight < imgWidth/imgHeight) --> img { height: 100% }
The idea is to fully cover the container using a proportionally scaled image using CSS (without javascript).
Desired result: http://jsfiddle.net/pu76s/6/
Use a background image with the CSS3 attribute background-size: cover
http://jsfiddle.net/UUhVf/
You can adjust the positioning with the background-position attribute
This is a tricky thing to solve without JS, as CSS has no way of knowing an image's aspect ratio.
If you are able to detect the AR from your back-end and set a class, I'd do something like:
img.portrait {
max-height: 100%;
height: 100%;
width: auto;
}
img.landscape {
height: auto;
width: 100%;
max-width: 100%;
}
I have my img tag defined with some CSS as:
img
{
width: auto !important;
height: auto !important;
max-width: 100%;
}
It works just fine in some of the Mobile Browsers I have tried, as well as Google Chrome on a desktop. However, it does not seem to work in IE or FireFox. By that, I mean, as you resize the window. Take a look at a sandbox site I am working on: http://terraninstitute.com. I have the image on the home page intentionally set to be a huge picture. Also navigate to the Information (main menu) then Newcomers (side menu) and notice the map image at the bottom. On my Droid (and a few other devices I can get my hands on) as well as in Google Chrome this looks pretty good. In IE and FireFox, not so much.
Am I missing something? Conflicting style definitions? I am not finding them as of yet if it is.
TIA
You're declaring the width of your images multiple times in your document unnecessarily and declaring a max-width the wrong way. Max-width is supposed to define a max size/boundary for your images (600px, for example), if you declare max-width:100% in conjunction with width:100%, you're not really doing anything with that declaration as the images will expand 100% as it is.
Remove the width declarations from your CSS in the following lines:
line 116: delete the img declaration all together, it is not needed.
line 365: remove the max-width:100% and height:auto; attribute as they are not needed (and if you can delete the declaration all together as you can declare that elsewhere)
line 121: Now just stick with this one and just add the following:
img {
height: auto;
width:100%;
}
Bootstrap solution for responsive images:
img {
/* Responsive images (ensure images don't scale beyond their parents) */
/* Part 1: Set a maxium relative to the parent */
max-width: 100%;
/* IE7-8 need help adjusting responsive images */
width: auto\9;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Don't use !important
Make your CSS more speficic:
body img {
width: auto;
height: auto;
max-width: 100%;
}
in style.css line line 116, 212 and in inuit.css line 365. Remove all those.
img{
height: auto;
max-width: 100%;
}
Thats all you need.