I have a carousel on a web page that I have absolute positioning on of top:420px and left:640px. I would like for it to collapse and become vertical when the screen size changes. I put the media query in display:flex flex-direction: column. The slider doesn't move from its absolute position. Is there a way I can make it responsive and collapse to a column when screen size is smaller.
.main {
background: transparent;
border-radius: 10px;
max-width: 50%;
width: auto;
text-align: center;
position: absolute;
top: 420px;
left: 640px;
}
#media screen and (max-width: 600px) {
.main {
max-width: 100%;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.main div img {
max-width: 100%;
width: auto;
}
display:flex and flex-direction: column only affects the inner arrangement of your div. In order to change your div's position, you'll have to change the top and left values. For example:
.main {
background: transparent;
border-radius: 10px;
max-width: 50%;
width: auto;
text-align: center;
position: absolute;
top: 420px;
left: 640px;
display: flex;
}
#media screen and (max-width: 600px) {
.main {
max-width: 100%;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 100px;
left: 100px;
}
}
.main div img {
max-width: 100%;
width: auto;
}
<div class="main">
<div>First div</div>
<div>Second div</div>
</div>
Related
When height is reduced below certain limit the image placed at top of div is not visible and cannot be scrolled up as shown in the pictures. Can anyone tell on how to solve this.
Webpage when resized:
Full webpage:
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.box {
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
img {
position: relative;
top: -20px;
left: 120px;
}
<div class="box">
<img id="xy"src="https://placeimg.com/50/50/animals">
</div>
At "body" part of css, try "min-height" instead of "height".
/*your code*/
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.box{
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
/*try this one instead ("min-height" instead of "height") and (added "margin-top: 5vh" to ".box")*/
body{
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
}
.box{
margin-top: 5vh;
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
Your img is positioned relative to the nearest positioned ancestor. That means it is being placed -10px beneath the body, because .box does not have any position set.
I want the image and text to display on the same line, and have the image shrink and stay inline as the window shrinks.
Below is the CSS code. I want the image to shrink as the window shrinks.
.body1 {
display: flex;
flex-wrap: wrap;
background-color: #3803f6;
color: white;
align-items: center;
justify-content: space-between;
height: 500px;
padding: 0px;
margin: -10px;
position: relative;
height: 100%;
justify-content: flex-start;
}
.text {
display: flex;
display: block;
width: 300px;
height: 300px;
padding: 15px;
padding-left: 90px;
color: rgb(201, 212, 254);
}
.imgcontainer {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
padding-bottom: 50px;
background-color: aqua;
}
.img {
display: flex;
background-image: url('blue.jpeg');
padding: 100px;
position: relative;
background-size: cover;
}
Any suggestions would be nice
Give the img container a percentage width and the img element width=100%.
For example if you had 3 images on every line with 10px margin, set img container width to width: calc(100%/3 - 20px) and so on. Same goes with the text, it depends how many element you want on each line and then do the calculations accordingly.
So I have this middle container (div) which consists of 2 smaller div.
Here's the code for the div that wraps both div:
.midContainer{
width: 100%;
height: 30vh;
max-height: 700px;
display: flex;
flex-wrap: wrap;
overflow: auto;
justify-content: space-between;
margin-bottom: 15px;
}
Here's the code for left div:
.tokenInfoBox{
width: 60%;
height: 100%;
max-height: 700px;
// padding: 20px 30px ;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
Here's the code for right div:
.ticketBox{
width: 40%;
height : 100%;
background-color: #0e0304;
box-sizing: border-box;
border-radius: 0 10px 10px 0;
display: flex;
flex-direction: column;
}
Have this added as well:
#media only screen and (max-width: 1060px) {
.tokenInfoBox, .ticketBox {
width: 100%;
}
}
So the content for the left div and right div (both div) display normally in big screen but overflow and overlap div below them in small screen. How do I wrap all the overflow content inside the div?
Here's the image in bigger screen and here's the image in smaller screen where I have to scroll to see all content.
CSS:
.midContainer {
width: 100%;
height: 30vh;
display: flex;
flex-wrap: wrap;
}
.tokenInfoBox {
flex: 1 1 25rem;
height: 100%;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
.ticketBox {
flex: 1 1 8rem;
height: 100%;
background-color: #0e0304;
border-radius: 0 10px 10px 0;
}
you can use flex in this case when applying flex-wrap.
If i understood well, the problem is because you have set the height of the .midContainer, try something like this:
.midContainer {
display: flex;
width: 100%;
align-self: flex-start;
}
.tokenInfoBox {
width: 60%;
flex-grow: 1;
display: flex;
flex-direction: column;
background: #1b1b1c;
}
.ticketBox {
flex-grow: 1;
display: flex;
flex-direction: column;
background: #0e0304;
width: 40%;
}
this will grow you div to fit the amount of height needed.
Also think about the use of media queries, small devices would be difficult to read 2 divs side by side, maybe should be better one over another
#media (max-width: 768px) {
.midContainer {
flex-direction: column;
}
.tokenInfoBox {
width: 100%;
}
.ticketBox {
width: 100%;
}
}
also I strongly recommend to use tailwind
I am trying to make my app responsive. The original css looks like this :
.footer-container {
width: 100%;
min-height: 260px;
height: auto;
background: black;
color: white;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: absolute;
}
The output is this :
But when the screen width reaches 1020px i want them to be underneath eachother.
I tried making the display:flex display:block :
#media only screen and (max-width: 1020px) {
.footer-container {
width: 100%;
min-height: 260px;
height: auto;
background: black;
color: white;
display: block;
text-align: center;
justify-content: center;
position: absolute;
}
}
But that turns out like :
I also tried flex-direction: row but that didn't work either, it practically didnt change a single thing.
Using basic HTML below a solution using a media query. Mobile first and when the screen size exceeds 1024 pixels the media query kicks in.
.footer-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.contact,
.subscribe,
.follow {
width: 100%;
display: flex;
justify-content: center;
}
#media (min-width: 1024px) {
.footer-container {
flex-wrap: no-wrap;
justify-content: center;
}
.contact,
.subscribe,
.follow {
width: auto;
}
}
<div class="footer-container">
<div class="contact">Contact us</div>
<div class="subscribe">Subscribe</div>
<div class="follow">Follow us</div>
</div>
I'm trying to create an element that will hold various images that should be responsive (width AND height). So far using flexbox has been successful except for one thing. Every time I reduce the width of my window, at a certain point, the flex items overflow the parent container and spill out beyond the containers width.
nav {
position: fixed;
top: 0;
left: 0;
height: 80px;
line-height: 80px;
background: black;
color: #fff;
width: 100%;
text-align: center;
}
body, p {
margin: 0;
padding: 0;
width: 100vw;
}
.wrapper {
height: 100vh;
margin: 100px auto;
min-width: 0;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 100%;
min-width: 200px;
flex-wrap: nowrap;
}
img {
max-height: 100%;
max-width: 100%;
}
.txt-rt {
text-align: right;
}
.footer {
background: darkgray;
height: 300px;
text-align: center;
}
<nav>This is a Navbar</nav>
<div class="wrapper">
<div class="flex">
<p>hello</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="">
<p class="txt-rt">world</p>
</div>
</div>
<div class="footer">
<h3 class="footer">Footer content</h3>
</div>
In this CodePen example, each time the window width is <560px or so and the height is at least 600px, the image is no longer responsive in width and the content overflows outside the screen.
All the other functionality looks like it's working as expected, but once I reduce my window width to a certain point the image will not shrink down. This prevents all 3 flex items being viewable in the width of the screen. Is there code I should be adding - not media queries since various sizes of images will be used - to make sure the image is responsive no matter the size of the window? Note: I don't want the items to wrap down to a second line.
You can use this code
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
text-align: center;
}
#main {
display: flex;
flex: 1;
flex-direction: column;
}
#main>article {
flex: 1;
text-align: center;
}
#main>nav,
#main>aside {
background: beige;
}
#main>nav {
order: -1;
}
header,
footer {
background: yellowgreen;
height: 20vh;
}
header,
footer,
article,
nav,
aside {
padding: 1em;
}
#media screen and (min-width: 576px) {
#main {
flex-direction: row;
}
#main>nav,
#main>aside {
flex: 0 0 20vw;
}
}
<header>This is a Navbar</header>
<div id="main">
<article><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt=""></article>
<nav>hello</nav>
<aside>world</aside>
</div>
<footer>Footer content</footer>
.flex {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 100%;
min-width: 200px;
flex-wrap: wrap; // this will move your content to new line if there is less space
}