I'm a newbie to web development. I'm using react to create a responsive split screen signup page, but when I adjust the height of the screen size, the form can not be shown entirely. Does anyone know which part of my css is wrong or missing?
Image: https://i.stack.imgur.com/WCv6I.png
The code is on the sandbox. https://codesandbox.io/s/immutable-bash-19wgq?file=/src/components/SignUp.js
2 important things to notice:
100vh as a height will give the element the height of the browser's window
overflow: when an element is higher than it's parent element, if the overflow is set to hidden, part of the content may not be visible.
I added a rule at the bottom regarding the screen height as such(here just for demo):
#media screen and (max-height: 500px) {
.split-screen {
flex-direction: row;
height: 100%;
}
.sign-up-container .right {
display: flex;
width: 50%;
height: 100%;
overflow: visible;
}
.sign-up-container .left {
min-height: 500px;
}
}
Related
Using dev tools my content shrinks at lower bps. Everything from my header nav to footer is inside a container. Container is set to:
.container {
width: 800px;
margin: 0 auto;
border: 2px solid green;
}
At 800px, I have a horizontal scroll and the content shrinks, adding space to the bottom of the footer. Using a media query, how could I fill the screen with the container? screen at 788 bp
I think you're looking for media queries:
#media only screen and (max-width: 800px) {
.container {
width: 100vw;
}
}
Check out the docs here.
Cheers! 🍻
width:100% this will make the container div to take-up all of the viewport.
I think what you want is width: 100% and max-width: 800px.
I have a problem with my navbar. I'm using Bootstrap for a responsive navbar but it overflows on the mobile version of my site. I used overflow-x: hidden on body and it solved the problem for larger versions but not the mobile version. I've checked for margin/padding issues on all my elements in the navbar but can't seem to find the problem. You can see the issue on www.tcbarringerphotography.com on the right hand side if you view it smaller than 500ish pixels. Any ideas?
Your problem is with width of two classes that you are using in your footer
social-media
blog-posts-link
#media only screen and (max-width: 1040px) {
.social-media {
width: 100%;
}
.blog-posts-links {
width: 100%;
}
}
Reduce the width to 90% at media screen max-width: 576px;
#media only screen and (max-width: 576px) {
.social-media {
width: 90%;
}
.blog-posts-links {
width: 90%;
}
}
mark as answer if it works thank you ;-)
I have 100% height and width container, then means if the resolution of the any screen is 100%, then the elements inside of the container is compressing if the resolution is not compatible in my position design, I want to have a responsive container with responsive elements inside of it but the elements will not compress. (Example try to resize the stackoverflow website, the elements is still the same.)
Here's my example code:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
<div class="container">
<h1>Responsive Container</h1>
</div>
I am not sure about what is actually needed, if you want to restrict the elements from not being responsive above or below a particular value, you need to fix the container element to a fixed pixel width when the width is less/greater than particular screen value using media queries.
Refer CSS Media Queries
CSS:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
#media only screen and (max-width: 500px) {
.container {
width: 500px;
}
}
In the below JSFiddle you can see that the elements is set to fixed width (500px) when the screen width is less than 500px.
JSFiddle Demo
I have the folowing slider:
But i have a problem with resizing it.
Right now its 1200 x 400, and when I resize the page the image width will resize fine. The problem is that the height stays 400px, but I want that the height also resizes relative to the width of the image when you view it on a smaller device.
How do I do that?
This is what you see on a phone:
The css for the image right now is:
max-width: 100%;
height: auto;
What I have tried is:
Set the height to 33.3% (width html, body and #container set to width: 100%)
I tried differend settings with vh and vm but did not work as I wanted it to
Btw:
I am using Bootstrap 4, so if there is a class in Bootstrap that can solve this would be perfect.
I also have a live version on https://jalinen.luukwuijster.io
This did the job. Setting this elements to display block.
carousel-item-next, .carousel-item-prev, .carousel-item.active {
//display: -webkit-box;
//display: -webkit-flex;
//display: -ms-flexbox;
//display: flex;
display: block;
}
However, you will get a small slider on a smaller screen. What I would do is to set the imagse as background-image, then set the background-size to cover. This way the image will be scaled down/up from the center(or you can change from wherever you want). Then I would set media queries for the height of the slider. This way you have more control over the slider.
Quick fix, just override your bootstrap and set height according to your screen size.
#media screen and (min-width: 480px) {
#yourDiv {
height: 200px; //or 50%;
}
#media screen and (min-width: 1024px) {
#yourDiv {
height: 400px; //or 100%;
}
Here's the page: https://hamzicabdulah.github.io/Raptitude/
The divs with the "other-stories" and "footer" classes overlap when the height of the "other-stories" div is set manually:
.other-stories {
height: 65%;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
}
}
If I remove the above code, the divs don't overlap. What's the workaround here, considering the manually set height of the "other-stories" div needs to stay there in order to work fine in Firefox?
Set Float to footer and other stories.
.other-stories {
height: 65%;
float:left;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
float:left;
}
}
It overlaps, because the <div>s in your <div class="other-stories"> are overflowing out of the div itself.
Why do you have a fixed height on other-stories what functionality are you trying to gain? Also, is there a particular reason you are using height %s?
With flex is a little tricky. I suggest to change all, remove flex display and use bootstrap grid. Do you know?