KPC
Kevin Powell - Community•4mo ago
roger

Help with image display in desktop and mobile version

2 Replies
vince
vince•4mo ago
You can put the whole section (let's call it hero) in a grid container: 
section.hero {
  display: grid;
  place-items: start center; // might need to be center start can't remember order
}
section.hero {
  display: grid;
  place-items: start center; // might need to be center start can't remember order
}
This will work for desktop; then you can rewrite it for mobile like: 
@media (min-width: 1024px) {
  section.hero {
    display: grid;
    place-items: start center;
  }
}
@media (min-width: 1024px) {
  section.hero {
    display: grid;
    place-items: start center;
  }
}
You really don't need any special styles for mobile; maybe a min-height on the hero section itself but it depends if this is the only content / if you're using an image rather than a background-image etc
ἔρως
ἔρως•4mo ago
if you want to swap the image, use <picture> with multiple <source> and an <img> on the <img>, you can put the src of the mobile image, and then add a <source> with a media attribute

Did you find this page helpful?