hi all i have a three row bootstrap 4 column as shown below but for some reason its not responding to the resizing even though i changed the min-width in media queries and also have added container fluid in the html. Can somoene please tell me what im doing wrong and how i can make it responsive ? Thanks for the help !!
<div classname="container-fluid">
<div classname="row">
<div className="col-xs-4">
<div className="card">
<div className="card-body">
<img className="card-img-top" src={trail.imgSmall} />
<h2 className="card-title">{trail.name}</h2>
<div className="star-rating__ico fa fa-star-o fa-lg">{trail.stars}</div>
<br></br> <br></br>
<h4 className="card-subtitle">{trail.summary}</h4>
<p classname="card-text"> {trail.length} km </p>
<button> View </button>
</div>
</div>
</div>
</div>
</div>
css
#media only screen and (min-width : 480px) {
.col-xs-4{
{ width: 20%; }
}
}
#media (min-width: 408px) {
.card {
margin-left: 0;
margin-right: 0;
width: 50%;
position: relative;
left:0px;
}
}
.card-info {
padding: 1rem;
display: -ms-grid;
display: grid;
-ms-grid-rows: 1fr 2.5rem;
grid-template-rows: 1fr 2.5rem;
-ms-grid-columns: 3fr 1fr;
grid-template-columns: 3fr 1fr;
}
.card-title {
font-size: 2rem;
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.card-icon {
grid-row: 1 / 2;
grid-column: 2 / 3;
justify-self: right;
width: 30px;
height: 30px;
background-color: LightBlue;
border-radius: 100%;
display: -ms-grid;
display: grid;
-ms-grid-column-align: center;
justify-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.car
If you are using bootstrap 4, do mention. Also I don't think bootstrap 4 has col-xs-* class instead it uses col-* classes for that, and you need to add cols for specific device widths instead of modifying media queries first to see if that can solve your problem
Related
Trying to evenly space out all grid items in the middle of the page:
App Component:
return (
<div className="App">
<div className="App__box">
<Box />
</div>
</div>
);
}```
App Css:
.App {
$large-screen: 1024px;
$xlarge-screen: 1280px;
text-align: center;
&__box {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 16px 16px;
}
#media (min-width: $large-screen) {
&__box {
grid-template-columns: repeat(2, 2fr);
justify-items: center;
}
}
}
Ps the desired outcome i am trying to achive for the `$large-screen` breakpoint
fix the with with max-width property
then give it
margin: 0 auto;
width: 100%;
If I have understood the question, it's possible by using justify-self and nth-child. see code:
.boxes {
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 16px 16px;
}
.box {
width: 10rem;
padding: 1rem;
text-align: center;
background-color: red;
justify-self: end;
}
.box:nth-child(2) {
background-color: blue;
justify-self: start;
}
<div class="App">
<div class="boxes">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>
You could try using a
{
display: flex;
flex-wrap: wrap;
}
and try out justify-content prop for parent component, and for child components could use flex-grow prop.
Check out:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
Is it possible to create a layout the same as the below one in flexbox?
You can also make this layout with 3containers if you want it as flexbox.
.container {
display:flex;
width: 400px;
height: 200px
}
.container1 article, .container3 article {
width: 100px;
height: 200px;
background-color: orange
}
.container2 article {
width: 200px;
height: 100px;
background-color: red;
border: 1px solid blue
}
.container2 {
display: flex;
flex-direction: column;
}
article {
display: flex;
justify-content: center;
align-items: center
}
<section class="container">
<section class="container1">
<article>1</article>
</section>
<section class="container2">
<article>2</article>
<article>3</article>
</section>
<section class="container3">
<article>4</article>
</section>
</section>
It's not possible yet, to set all of them only in a container, you must have 3 containers.
Or you can also use CSS Grid. It's more preferred for these use cases.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
width: 400px;
height: 200px
}
article {
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
background-color: orange
}
.first {
grid-column: 1/ 2;
grid-row: 1/ 3
}
.second {
grid-column: 2/ 4;
}
.third {
grid-column: 2/ 4;
grid-row: 2/ 3
}
.forth {
grid-column: 4/ 5;
grid-row: 1/ 3
}
<section class="container">
<article class="first">1</article>
<article class="second">2</article>
<article class="third">3</article>
<article class="forth">4</article>
</section>
As title says + I need to keep itemX and itemY in one cell on each device. Is media query the only solution? If there is more of a native css grid way I would love to learn it.
See fiddle:
https://jsfiddle.net/forusak/ctg3auh0/
.container {
display: grid;
grid-template: repeat(10, auto) / repeat(auto-fit, minmax(250px, 1fr));
column-gap: 30px;
color: white;
}
.container>* {
background-color: #b90011;
border: 1px solid black;
padding: 5%;
height: 20px;
}
.item1 {
grid-row: 1 / 10;
height: auto;
}
/* comment out part bellow to see mobile responsivity which is missing here */
.itemX,
.itemY {
grid-area: 3 / 2 / 3 / 2;
width: 40%;
}
.itemY {
margin-left: auto;
}
<div class="container">
<div class="item1"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="itemX"> itemX </div>
<div class="itemY"> itemY </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
Checkout the below code. At screen-width < 464px itemX and itemY will reassemble vertically.
body {
padding: 1rem;
}
.res-grid-1 {
--min-size: 25rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--min-size), 1fr));
grid-gap: 1rem;
}
.res-grid-1 > div {
padding: 5rem 1rem;
text-align: center;
font-size: 2rem;
background: #557571;
color: #ffffff;
}
.res-grid-2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
grid-gap: 1rem;
}
<div class="res-grid-1">
<div>Item 1</div>
<div class="res-grid-2">
<div>Item X</div>
<div>Item Y</div>
</div>
</div>
However there is a small bug, between screen-width 1280px and 1328px itemX and itemY are reassembling horizontally(which should be vertically). This is due to nesting of grid;it is possible to achieve responsive CSS grid without media-queries but here you're trying achieve the same for a nested grid without media-queries.
If you wish to use media-queries, you can fix this bug by making following changes to CSS:
In class res-grid-2 replace line:
grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
with:
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
and add:
#media only screen and (max-width: 576px) {
.res-grid-2 {
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
}
I'm trying to make small grid of images. On desktops I want 3 images per column and on mobiles 2 images per column. I have no problem doing that. Problems start when I shrink the size of the page to the mobile size. The images are in the proper order but they do not shrink, they keep their original size and the one on the right goes out of the grid (you can't see half of it). I tried max-width:100%, width:100% etc. Did not work.
.sponsors1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#media(max-width:768px) {
.sponsors1 {
grid-template-columns: 1fr 1fr;
justify-self: center;
grid-gap: 8px;
margin-top: 10px;
margin-bottom: 20px;
align-items: center;
overflow:
}
.img1 {
justify-self: center;
}
.img2 {
justify-self: center;
}
.img3 {
justify-self: center;
}
}
<div class="sponsors1">
<img src="images/#.png" alt="">
<img src="images/#.jpg" alt="">
<img src="images/#.png" alt="">
</div>
You should set your image containers' justify-self properties to stretch and then set the image's (NOT their containers') widths to 100%.
.sponsors1{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
#media(max-width:768px){
.sponsors1{
grid-template-columns: 1fr 1fr;
justify-self:center;
grid-gap: 8px;
margin-top: 10px;
margin-bottom: 20px;
align-items:center;
overflow:
}
.img1{
justify-self: stretch;
}
.img2{
justify-self: stretch;
}
.img3{
justify-self: stretch;
}
}
img {
width: 100%
}
<div class="sponsors1">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="">
</div>
What I have is a two-column layout with several items inside:
.grid {
column-count: 2;
}
.grid-item {
break-inside: avoid;
height: 50px;
margin-bottom: 10px;
background-color: green;
text-align: center;
line-height: 50px;
color: white;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
https://codepen.io/Deka87/pen/RgdLeZ
Now I need an ability to reorder those items inside the columns with CSS only (so they were in a different order on different screen resolutions), so I thought I can do this with:
.grid {
display: flex;
flex-direction: column;
column-count: 2;
}
.grid-item:nth-child(1) {
order: 5;
}
Obviously, this didn't work and broke the 2-column layout. Anybody tried to solve this before? Any chance I can get this working?
PS: Items on the same line should not be of the same height (I could have used simple floats in this case). Sorry for not specifying in the beginning.
Without a fixed height on the container, a column of flex items won't know where to wrap. There's nothing to cause a break, so items will continue expanding the single column.
Also, column-count and display: flex represent two different CSS technologies. column-count is not a valid property in a flex container.
CSS Grid Layout may be useful to you:
re-size the screen width to trigger the media query
revised codepen
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, auto);
grid-auto-rows: 50px;
grid-auto-flow: column;
grid-gap: 10px;
}
.grid-item {
background-color: green;
text-align: center;
line-height: 50px;
color: white;
}
#media ( max-width: 500px) {
.grid-item:nth-child(2) {
order: 1;
background-color: orange;
}
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
I tend to use flexbox for this
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.grid-item {
box-sizing: border-box;
width: calc( 50% - 5px );
min-height: 50px;
margin-bottom: 10px;
background-color: green;
text-align: center;
line-height: 50px;
color: white;
}
.grid-item:nth-child(1) {
order: 5;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
The flex syntax is widely supported and super flexible.