New design panel - media queries

investigating

#1

Hello everyone,
I’m making tests on the new design panel and when I change the text align for phone (xs):
37

25

It changes all screen sizes, not just the phone (xs)


#2

Yes that is because of the mobile first design. And the media queries which are based on bootstrap

So basically phone is always visible and other overrides come later on specified devices if any.


#3

@George ,
but after I select phone (xs) and change it, the other devices stay all like the phone xs even if they have other align selected.
Phone xs override everything

59

06


#4

What are the media queries generated in your head tags?
Please paste the whole styles block


#5

Got it.
I had set to middle on full:
54

and was changing everything


#6

Nop,
Something is not wright.

<style id="wappler-style">
    @media (min-width: 576px) {
      #p_1 {
        text-align: center
      }
      #p_2 {
        text-align: center
      }
      #p_3 {
        text-align: center
      }
      #p_4 {
        text-align: center
      }
    }
    @media (min-width: 768px) {
      #p_1 {
        text-align: right
      }
      #p_3 {
        text-align: left
      }
      #p_4 {
        text-align: right
      }
      #p_2 {
        text-align: left
      }
    }
    @media (min-width: 992px) {
      #p_3 {
        text-align: left
      }
      #p_4 {
        text-align: right
      }
      #h4_1 {
        text-align: left
      }
      #p_2 {
        text-align: left
      }
      #p_1 {
        text-align: right
      }
    }
    @media (min-width: 1200px) {
      #p_3 {
        text-align: left
      }
      #p_4 {
        text-align: right
      }
      #p_2 {
        text-align: left
      }
      #p_1 {
        text-align: right
      }
    }
    #h4_1 {
      text-align: center
    }
    #p_3 {
      text-align: center
    }
    #p_4 {
      text-align: center
    }
    #p_2 {
      text-align: center
    }

#7

Well the following rules are below all the media queries and override them:

    #h4_1 {
      text-align: center
    }
    #p_3 {
      text-align: center
    }
    #p_4 {
      text-align: center
    }
    #p_2 {
      text-align: center
    }


#8

I deleted everything and started again, this is the result:

 <style id="wappler-style">
    @media (min-width: 576px) {
      #p_2 {
        text-align: center
      }
      #p_3 {
        text-align: center
      }
      #p_4 {
        text-align: center
      }
      #p_1 {
        text-align: center
      }
    }
    #p_2 {
      text-align: center
    }
    @media (min-width: 768px) {
      #p_2 {
        text-align: left
      }
      #p_1 {
        text-align: right
      }
    }
    @media (min-width: 992px) {
      #p_2 {
        text-align: left
      }
    }
    @media (min-width: 1200px) {
      #p_2 {
        text-align: left
      }
    }
    #p_1 {
      text-align: center
    }
  </style></head>

#9

What you have there will align everything center except your #p_2 elements


#10

yap, but is Wappler that is doing automatically.


#11

What exactly is Wappler doing automatically?


#12

change the text align to center for all views after I put center on mobile xs

wappler.mov (3.5 MB)


#13

So, you want to show that the #p_4 element does not get the styling for the tablet (and up) device?
Are you sure some other rule is not overriding the style?


#14

@Teodor
can you replicate this? Is this a bug?


#15

I am asking you a question in my last post. Can you answer it please, as I am not sure I understand what your issue is? :slight_smile:


#16

you want to show that the #p_4 element does not get the styling for the tablet (and up) device?

Yes

Are you sure some other rule is not overriding the style?

There is no other rule overriding the style.


#17

So what if you start with a new page, and try to do this on a random element?
What is the styles tag and its content being generated?


#18

Ok now I got it.

It only worked if I was on the App Structure tab. On the Design tab, is not working properly, at least on this page.


#19

What do you mean by:

These are 2 different panels with 2 different purposes.


#20

I was trying to apply the different text-align to different screen sizes on the new Design TAB:

10

but was not working properly. It only worked on App Structure: