Jump to content

Community

Style issue with responsive CSS


McAtze
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy