CSS question about ion-grid - responsive margins

Ionic Framework ionic-v3
1

I’m new to ionic and to css - so forgive my ignorance.

I’ve made a game where I deal 92 cards face down for the user to pick, one by one.

I put the cards in a 12 column grid with 8 rows. For most screen sizes all the cards fit on one screen, but as the screen gets larger, the grid is too large for a screen, and the user must scroll down to get to the bottom.

I played with CSS and found that if I added left and right margins, I could shrink the size of the grid until it fit on one screen - but now when I shrink the screen size, it’s much too small for smaller screens.

I’ve tried to create CSS classes that are “responsive” meaning - I had hoped that different constraints could be used for different screen sizes - but without success.

I (think I) want to operate on the entire grid - but so far my class seems all or nothing - no “responsiveness.”

Can someone help me figure out how to apply a CSS class to ion-grid in a responsive way? Or - tell me how to specify margins (I’m currently using left: 20% -for example) that are “responsive” meaning that I could use different numbers for different sized screens?

I would be most appreciative of any help! thanks!

2

I think what you need to use are Media Queries. With the help of these you can make CSS rules for specific screen sizes.

Look here (W3Schools) for a short tutorial about Media Queries, I’m sure you will understand them quickly :slight_smile:

1 Like
3

oh man! You rock! thanks! Didn’t know about them.

I went to youtube - found a 5 min course on media query (https://www.youtube.com/watch?v=2KL-z9A56SQ)

This is what I needed. Still tweaking the #s - but it’s working and I’ll be able to make it right.

Thank you sir! So helpful!

1 Like
4

You’re welcome, glad I could help! Cheers mate!

1 Like
5

might I ask one followup?

I was able to use media query to vastly improve the layout over different screen sizes. Thanks again for that!

My followup is very specific to ion-grid itself.

I am telling the grid to put up 12 columns = using size=“1”

I’m wondering if there’s a way to switch to 6 columns for xs screen size? I see a lot of breakpoints for different css attributes - but I haven’t seen how to change from 12 to 6 columns? (size=“1” to size=“2”)

Hopefully I just can’t read - but I haven’t seen how to do that?

thanks in advance for any/all help!

6

tbh, I’m not an expert if it comes to the ion-grid. But you could use a workaround with Angular’s *ngIf:

You’ll need the grid two times: One with size=“1” and one with size=“2”.
Now you can put *ngIf there to check if it’s a small or big screen:

<ion-grid *ngIf="smallScreen === false">
...with size="1"
</ion-grid>

<ion-grid *ngIf="smallScreen === true">
...with size="2"
</ion-grid>

Small screen is a simple boolean in your ts code. Just check the screen size with window.screen.width and set the boolean how you want to.

ngOnInit() {
  if (window.screen.width < SMALLSCREEN) {
    this.smallScreen = true;
  } else {
    this.smallScreen = false;
  }

I think this would work, but maybe there’s a better solution.

7

I love your idea!

I found that window.screen was a constant - and I was trying to use Chrome’s developer tools - so I found Platform, which has a ton of information about the screen etc.

I played with this for a bit but atm haven’t cracked it - my loop is:

<ion-col size=“1” *ngFor=“let card of shuffledDeck; let i = index” class=“pickCol”>

and I can’t put both “ngFor” and “ngIf” on the same line.

I’ll keep playing - and thanks for the suggestion! So appreciated!

8

You rather put the *ngIf on a parent wrapper for the ion-cols than the cols themself. So in the end, you’ll have two grids in your template: One contains cols with size=“1” and one with size=“2”. But you will only show one. Which one depends on the *ngIf which checks the screensize and then shows or hides the complete grid, not single cols. This should work :slight_smile:

1 Like
9

gmta!

I had the same idea just after I posted the note to you :slight_smile:

I tried your suggestion after 5 hours of sleep - just wanted to give it a try. But you’re right - and I’m about to try that one too.

thanks again! I so appreciate the help!

10

and it works perfectly! thanks again!!

11

You’re welcome :smile:

1 Like