1

I wanted to make my github markdown responsive when viewed on different screens
so, I added css flexbox to the images.
It works fine when I try md preview in VS Code,
but after I push all changes on github, then the styling are not working properly

Does the style tag works as normally other html tags works?

Or Is there any other good way to present screenshots in readme file, Like showing small tiles in readme and expanding them when clicked. Some help will be appreciated

code repo: https://github.com/sachuverma/React-E-Commerce-v2
styles code:

.row-main {
  display: flex;
  flex-wrap: wrap;
}

.column-main {
  flex: 50%;
  padding: 10px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 33%;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .column{
    flex: 50%;
  }
}

@media screen and (max-width: 500px) {
  .row {
    flex-direction: column;
  }
  .column-main {
    flex: 100%;
  }
  .column{
    flex: 100%;
  }
}

img{
  opacity: 0.6;
  transition: all 0.3s linear;
}

img:hover{
  opacity: 1;
}

vs code preview vsc preview

github preview github preview

ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
sachuverma
  • 559
  • 6
  • 27

1 Answers1

0

Try width: 100% instead of flex:100%for the flex items in the media queries

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • that also didn't worked. Its like no css is applied because I also tried adding hover effect on images, but that too wasn't working. Can't we add css to markdowns? Like we can add html tags, but style tag isn't working. – sachuverma Feb 01 '21 at 13:32