CODEWITHSUNDEEP
cssionic-framework
GY22
GY22

Reputation: 785

Media queries not taking with ionic project

I am working on a Ionic project with the api from The Movie Database

As you can see from the image I have a grid of poster covers. On the iPhone 5 (tweaked it with css) and iPhone 6Plus you can see that the grid is center. But on the iPhone 6 its a little off.

It tried to fix this with media queries but if I make a change then the grid changes also for the iPhone 5 & iPhone 6Plus.

My question is how to just adjusted the layout for the iPhone 6 without messing the layout for the iPhone 5 & iPhone 6Plus.

Part of my HTML code:

<div class="row responsive-sm responsive-md responsive-lg wrapper-grid">
    <div class="col col-33">
        <div class="">
            <a ng-repeat="trending_movie in trending_movies" href="#/app/trending/{{trending_movie.id}}">
                <img ng-if="trending_movie.poster_path" ng-src="http://image.tmdb.org/t/p/w92/{{trending_movie.poster_path}}" >
                <img ng-if="!trending_movie.poster_path" ng-src="{{default_image}}">
            </a>
        </div>
    </div>
</div>

Part of my CSS code:

/* GRID PAGE */
.wrapper-grid{
  padding-left:15px;
}

/*  MEDIA QUERIES */
/*@media(max-width:750px) and (max-height:1334px){
    .wrapper-grid{
        padding-left:40px !important;
    }
  }
*/

enter image description here

Upvotes: 3

Views: 4571

Answers (1)

Victor Luna
Victor Luna

Reputation: 1814

May I suggest using media queries with the width between iPhone 5 and iPhone 6Plus:

@media (max-width:413px) and (min-width:321px) {

}

This will change whatever your css is between this values. When the browser is between 413px and 321px wide, the within the media queries will be applied.

Upvotes: 4

Related Questions