How to change margin size based on screen size breakpoints? - html

Question

I have a row of reactstrap cards that are dynamically placed in rows, and for "md" screen sizes and up (bootstrap), there will be 3 cards per row, and for lower it'll be 2 cards.
Here's the component:
<Card
outline
as='a'
style={{ cursor: 'pointer', margin: '1rem' }}
>
<CardImg top width='100%' src={img}' />
<CardBody>
<CardTitle tag='h5'>{this.props.title}</CardTitle>
</CardBody>
</Card>
My problem is, I want only the middle card to have margins on the sides (marginLeft: '1rem', marginRight: '1rem').
Since the number of cards in a row changes based on screensize, I can't just say "if it's a multiple of x, then have this style". Unless I know the screensize, so is there a way to create a prop in my parent component that I can pass into my card component to let it know what to set the margin as?
Thanks
(Any better suggestions are welcome)
More code:
render () {
return (
...
<div className='row' style={{margin:'0rem'}}>
{
disp.map((d, index) => {
return (
<div className='col-md-4 col-6 d-flex'>
<the card component here>
</div
)
...
}
}
</div>
....

Answer 1

If you want space in between the children then you can use gap and using flexbox. But gap property doesn't have great support.
html, body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card-container {
background-color: aquamarine;
display: flex;
flex-direction: column;
gap: 1rem;
}
.card {
border: 1px solid grey;
padding: 1rem;
height: 100px;
}
#media only screen and (min-width: 600px) {
.card-container {
flex-direction: row;
}
.card {
flex: 1;
}
}
<div class="card-container">
<div class="card">card1</div>
<div class="card">card1</div>
<div class="card">card1</div>
</div>
So you can use
[parent-selector] > * + *
Above selector means select all children that are siblings of any element and which is direct child of parent-selector(use class for parent or HTML element).
If the structure is from top to bottom or in row view then you can use
.card-container > * + * {
margin-top: 1rem;
}
and if you want space in between when the elements are arrange in left to right or in columns then use
.card-container > * + * {
margin-left: 1rem;
}
html, body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card-container {
background-color: aquamarine;
display: flex;
flex-direction: column;
}
.card {
border: 1px solid grey;
padding: 1rem;
height: 100px;
}
.card-container>*+* {
margin-top: 1rem;
}
#media only screen and (min-width: 600px) {
.card-container {
flex-direction: row;
}
.card {
flex: 1;
}
.card-container>*+* {
margin-top: 0;
margin-left: 1rem;
}
}
<div class="card-container">
<div class="card">card1</div>
<div class="card">card1</div>
<div class="card">card1</div>
</div>

Answer 2

"How to change margin size based on screen size breakpoints?"
That's exactly what the Bootstrap responsive spacing classes are used for. But, if you're using the grid (Row > Col) it's better to use padding (not margins) to adjust the spacing between columns.
Assuming you're using the column classes col-6 col-md-4 to get "for "md" screen sizes and up, there will be 3 cards per row, and for lower it'll be 2 cards."...
You can responsively adjust the padding on the columns, or the margin in the cards. For example, here's 3 margin units on md and up (mx-md-3), and 1 margin unit (mx-1) on lower:
<Col className="col-6 col-md-4 py-3">
<Card className="mx-1 mx-md-3">
...
</Card>
</Col>
React on Codeply