all repos — moviedb @ ff37b80a3ac07b668819c79b0b5f2c46ea162c21

A Flask web-app to browse movie information from IMDb using imdbpy

make movieinfo screen mobile friendly
Prithu Goswami prithugoswami524@gmail.com
Mon, 04 May 2020 13:33:18 +0530
commit

ff37b80a3ac07b668819c79b0b5f2c46ea162c21

parent

6653c4c1930f1032b4b57b86bac6104730bf24da

1 files changed, 36 insertions(+), 0 deletions(-)

jump to
M moviedb/static/css/custom.cssmoviedb/static/css/custom.css

@@ -127,6 +127,12 @@ font-family: "Roboto Mono";

text-transform: none; } +@media only screen and (max-width: 700px){ + .nav-username { + display:none; + } +} + .landing{ background: url(../img/bg.jpg); display: flex;

@@ -145,6 +151,7 @@ flex-direction: column;

justify-content: center; align-items: center; } + .search{ display: flex;

@@ -197,21 +204,50 @@ justify-content: center;

align-items: flex-start; } +@media only screen and (max-width: 700px){ + .movieinfo { + width: 95%; + flex-wrap: wrap; + padding: 1rem; + margin-bottom: 2.5rem; + } +} + .poster{ flex-shrink: 0; width: 30%; } +@media only screen and (max-width: 700px){ + .poster{ + flex-shrink: 0; + width: 50%; + margin-bottom: 2rem; + } +} + .infotext { padding-left: 2.6rem; } +@media only screen and (max-width: 700px){ + .infotext{ + padding: 0rem; + } +} + .infotext-head { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; +} + +@media only screen and (max-width: 700px){ + .infotext-head{ + margin-bottom: 0.4rem; + } } .infotext-head .material-icons.md-fav { font-size: 2rem;