I am using the React Bootstrap Card component, and it looks fine on a browser, but on mobile the image gets squashed horribly, so I thought it would probably look better if it just didn't render it on mobile.
function RowCard({title, sub_title, post_text, image})
{
return (
<Card style={{flexDirection: "row"}}>
<Card.Img style={{width: "25%",objectFit: "cover"}} src={image} alt="banner" />
As an example this is the start of a function that produces a Card component given a struct with the relevant args. I tried wrapping the <Card.Img..> line using BrowserView from react-device-detect, but this made the image tiny for some reason, and I tried importing isMobile from the same package, but wasn't sure how to actually make use of it (just doing if(!isMobile){<Card.Img...>} didn't work).
Can anyone provide any insight into how to do this?
Thanks
you can edit it with css by using media query for phone size
<Card.Img className="image" style={{width: "25%",objectFit: "cover"}} src={image} alt="banner" />
@media only screen and (max-width: 600px) {
.image{
display: none }
}
you can check it here https://www.w3schools.com/css/css_rwd_mediaqueries.asp
but you can also just resize the image size to fit on mobile screen and also a good practice to design a responsive website
here are also some of the media queries for other screen sizes
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
body {
background-color: red;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
body {
background-color: yellow;
}
}
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px){
body {
background-color: blue;
}
}
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
body {
background-color: green;
}
}
/* Media Query for Large screens */
@media (min-width: 1281px) {
body {
background-color: white;
}
}