Style issue with responsive CSS

[McAtze]

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.

[WP V0RT3X]

Try @media screen and (max-width.

[McAtze]

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]

It would be best if you would show a demo. I can't help much if I can't see all the code.

[McAtze]

@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; }
}

 

[aXenDev]

Live demo 😄

[McAtze]

https://hobbykeller.club/movies/movie/58-deadpool/

[aXenDev]

Are you adding this to the custom.css file?

[McAtze]

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]

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]

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..