Jump to content

Recommended Posts

Posted

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.

Posted
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)

 

Posted

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

1439091942_Bildschirmfoto2020-08-17um16_37_55.thumb.png.0c224d709e620625f42b4747025c21b1.png

 

Then i tried to change the grid on view. So full view 4 items, tablet 2 or 3 items and phone 1 item..

1004556043_Bildschirmfoto2020-08-17um16_38_34.png.28707ac073a30f39003664fe6afed8eb.png

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

 

Posted (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 by McAtze
Posted (edited)

image.png.699364607c1a34adf486bf12de2c9082.png

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 by aXen | 1s2k
Posted
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..

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...