Layout based on device (iphone ipad)

ionic-v1
1

Hi there,

Is it possible to remove an outer

based on which device that the app are shown on ?
Or a way to approach this ?

On my main markup I have structure like this

<div class="row">
    <div class="col col-80 col-offset-10">
        <div class="card card-shuffle">

And I would like to remove

<div class="row">
    <div class="col col-80 col-offset-10">

on the iphone markup

Thank you :smile:

2

Have you tried the responsive grid?

3

Thanks for the reply :smile:

Yes I have…
Hove would you use it in this context ?

4 
<div class="row responsive-sm">
  <div class="col col col-80 col-offset-10">
     <div class="card card-shuffle">...</div>
  </div>
</div>
5

aah yes, that does some of it, but I still need the

<div class="card card-shuffle">...</div>

to fill out the entire (iphone)screen

6

Remember, we’re dealing with a webview, css media queries are our friends here.

@media only screen 
and (min-device-width : 320px)  {
  div.card{
    width:100%;
  }
}

@media only screen 
and (min-device-width : 500px)  {
  div.card{
    width:80%;
  }
}
7

thanks a lot :slight_smile:
I solved it in zurb (foundation) style where I create a .hide-for-small and .show-for-small based on the above media queries.

1 Like