Invision Community 5: A video walkthrough creating a custom theme and homepage By Matt Thursday at 04:02 PM
McAtze Posted August 17, 2020 Posted August 17, 2020 Hi everybody, i try to set up some responsive css parts, but it doesn't work as it should or i want. I would give some boxes a different height/width on medium and small screens. So i take this: @media (max-width: 375px) { [data-pageModule="movies"] .ipsList_inline .ipsGrid_span3.profilePath { height: 325px; max-height: 325px; } } @media (max-width: 979px) { [data-pageModule="movies"] .ipsList_inline .ipsGrid_span3.profilePath { height: 220px; } } But it doesn't work on small screens with max-width: 375px, it always take the large screen. Is there something wrong? I thought for screens with max-width 375px take the first one and for bigger screen take the last one.
McAtze Posted August 17, 2020 Author Posted August 17, 2020 4 hours ago, V0RT3X666 said: Try @media screen and (max-width. That was my first choice. It also doesn't work. Everytime when i have screen smaller then 375px i got the css properties for max-width 979px Maybe i should try to use @media (min-with: 767px and max-width: 979px)
aXenDev Posted August 17, 2020 Posted August 17, 2020 It would be best if you would show a demo. I can't help much if I can't see all the code.
McAtze Posted August 17, 2020 Author Posted August 17, 2020 @aXen | 1s2ki woould try to make the Movie App bay Adriano more responsive. So my first choice was so set a fix width for the container for Cast/Crew.. Then i tried to change the grid on view. So full view 4 items, tablet 2 or 3 items and phone 1 item.. But everytime i reloade the page the css isn't working. This is my responsive css: @media (max-width: 480px) { [data-pageModule="movies"] .ipsList_inline .ipsGrid_span3.profilePath { height: 325px; max-height: 325px; } .profilePath img.profileImg, .profilePath img.defaultImg { width: 200px; height: auto; } } @media (max-width: 768px) { .cMoviesIndexCarouselItemSidebar { min-height: 135px; width: 101px; overflow: hidden; } .cMoviesIndexCarouselItemSidebar .cMoviesCarouselItem_info { width: 101px; } .cMoviesIndexCarouselItemSidebar .cMoviesCarouselItem_info a span.cMoviesCarouselTitle { padding: 5px; max-width: 101px; } .cMoviesIndexCarouselItemSidebar .bgmovieCover { height: 135px; } .shelvesList_desc, .shelvesList_books, .shelvesList_avatar { width: 100%!important; display: block!important; float: none!important; } .ipsDataItem_modCheck { margin-top: -10px; } .cMoviesTable .ipsDataItem_generic .ipsThumb.ipsThumb_medium { width: 100%; max-width: 100%; } [data-pageModule="movies"] .ipsApp .ipsGrid > .ipsGrid_span3 { width: 48.93617021276595%; } } @media (max-width: 979px) { [data-pageModule="movies"] .ipsDataList.ipsDataList_reducedSpacing .ipsDataItem { padding: 10px 10px 20px 10px; } [data-pageModule="movies"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main, [data-pageModule="movies"] .ipsDataItem_icon:not( .ipsResponsive_hidePhone ):not( .ipsResponsive_hideTablet ) + .ipsDataItem_main + .ipsDataItem_stats { margin-left: 85px !important; } [data-pageModule="movies"] .ipsApp .ipsGrid > .ipsGrid_span3 { width: 48.93617021276595%; } [data-pageModule="movies"] .ipsList_inline .ipsGrid_span3.profilePath { height: 220px; } [data-pageModule="movies"] .ipsList_inline .ipsGrid_span3.similar { height: auto; } }
McAtze Posted August 17, 2020 Author Posted August 17, 2020 https://hobbykeller.club/movies/movie/58-deadpool/
McAtze Posted August 17, 2020 Author Posted August 17, 2020 (edited) No, i am working with the app related movie.css I think this could be a problem with firefox, in Chrome it looks better.. Edited August 17, 2020 by McAtze
aXenDev Posted August 17, 2020 Posted August 17, 2020 (edited) As you can see, both codes are read which causes your error. Restrict it by using min-width and max-width. Remember that the codes at the bottom have the highest priority. You can try to reverse the order of @media, but I strongly recommend limiting by min and max. Edited August 17, 2020 by aXen | 1s2k
McAtze Posted August 17, 2020 Author Posted August 17, 2020 Just now, aXen | 1s2k said: Restrict it by using min-width and max-width. That would be the best solution. 1 minute ago, aXen | 1s2k said: Remember that the codes at the bottom have the highest priority. That makes sense. So i have to set the smallest screen at the bottom and will see. Thanks for the hints..
Recommended Posts