@media queries

I have a web form that appears correctly in an iPhone or Android but gigantic in a web browser.

I understand from what I have heard that @media queries will handle this.

I found this example on w3Schools.

How do I implement on my web Form (.net aspx)

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

Open in new window



Here is my existing CSS from the <header>

        * {
            font-family: "Helvetica Neue", Helvetica;
            font-size: 37px;
            font-variant: normal;
            padding: 0;
            margin: 0;
        }

        #card-element {
            font-size: 32px;
        }

        html {
            height: 100%;
            vertical-align: top;
        }

        body {
            background: #E6EBF1;
            align-items: center;
            min-height: 100%;
            display: flex;
            width: 100%;
            align-items: baseline;
        }

        form {
            width: 960px;
            margin: 20px auto;
            padding: 0px 20px 0px 20px;
        }

        .banner {
            background: url(../Img/divit.png) no-repeat #167ccb 50% 100%;
            background-size: 60px 60px;
            color: #ffffff;
            box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08);
            border-radius: 4px;
            height: 300px;
            margin: 0px auto;
            text-align: center;
            line-height: 100px;
            font-size: 49px;
            align-items: center;
        }

Open in new window

Larry Bristersr. DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle AbrahamsSenior .Net DeveloperCommented:
you would create two styles for your different elements that needed to change:
(EG: No reason to do body as everything is 100% . . . but the banner size may change).

In that case:
@media screen and (max-width 768px)
{
/* phones - leave as is as you said it works */
.banner {
            background: url(../Img/divit.png) no-repeat #167ccb 50% 100%;
            background-size: 60px 60px;
            color: #ffffff;
            box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08);
            border-radius: 4px;
            height: 300px;
            margin: 0px auto;
            text-align: center;
            line-height: 100px;
            font-size: 49px;
            align-items: center;
        }
}

@media screen and (min-width 769px)
{
/* desktops - change to suit your needs */
.banner {
            background: url(../Img/divit.png) no-repeat #167ccb 50% 100%;
            background-size: 60px 60px;
            color: #ffffff;
            box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08);
            border-radius: 4px;
            height: 300px;
            margin: 0px auto;
            text-align: center;
            line-height: 100px;
            font-size: 49px;
            align-items: center;
        }
}

Open in new window


If you really wanted to get specific you could break the widths into ranges:
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
}

and change the min-width one to 480px.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Larry Bristersr. DeveloperAuthor Commented:
Kyle,
 I am so lost in this.

Seems like you simply wrapped the banner in the snippet below.
But it looks like it is just replicated?

@media screen and (min-width 769px)
{


}

Do I just do that with my entire code block below?

         * {
            font-family: "Helvetica Neue", Helvetica;
            font-size: 37px;
            font-variant: normal;
            padding: 0;
            margin: 0;
        }

        #card-element {
            font-size: 32px;
        }

        html {
            height: 100%;
            vertical-align: top;
        }

        body {
            background: #E6EBF1;
            align-items: center;
            min-height: 100%;
            display: flex;
            width: 100%;
            align-items: baseline;
        }

        form {
            width: 960px;
            margin: 20px auto;
            padding: 0px 20px 0px 20px;
        }

        .banner {
            background: url(../Img/divit.png) no-repeat #167ccb 50% 100%;
            background-size: 60px 60px;
            color: #ffffff;
            box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08);
            border-radius: 4px;
            height: 300px;
            margin: 0px auto;
            text-align: center;
            line-height: 100px;
            font-size: 49px;
            align-items: center;
        }

        .group {
            background: white;
            box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08);
            border-radius: 4px;
            vertical-align: top;
            line-height: 80px;
        }

        label {
            position: relative;
            color: #8898AA;
            font-weight: 300;
            height: 80px;
            line-height: 80px;
            margin-left: 20px;
            display: block;
        }

        .group label:not(:last-child) {
            border-bottom: 1px solid #F0F5FA;
        }

        label > span {
            width: 20%;
            text-align: right;
            float: left;
        }

        .field {
            background: transparent;
            font-weight: 300;
            border: 0;
            color: #31325F;
            outline: none;
            padding-right: 10px;
            padding-left: 10px;
            cursor: text;
            width: 70%;
            height: 80px;
            float: right;
            line-height: 80px;
            font-size: 32px;
        }

            .field::-webkit-input-placeholder {
                color: #CFD7E0;
            }

            .field::-moz-placeholder {
                color: #CFD7E0;
            }

            .field:-ms-input-placeholder {
                color: #CFD7E0;
            }

        button {
            float: left;
            display: block;
            background: #167ccb;
            color: white;
            box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08);
            border-radius: 4px;
            border: 0;
            margin-top: 30px;
            font-size: 38px;
            font-weight: 400;
            width: 100%;
            height: 100px !important;
            line-height: 60px !important;
            outline: none;
        }
          .lblbutton {
            float: left;
            display: block;
            background: #167ccb;
            color: white;
            box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.08);
            border-radius: 4px;
            border: 0;
            margin-top: 30px;
            font-size: 38px;
            font-weight: 400;
            width: 100%;
            height: 100px !important;
            line-height: 40px !important;
            outline: none;
        }

            /*button:focus {
                background: #555ABF;
            }

            button:active {
                background: #43458B;
            }*/

        .outcome {
            float: left;
            width: 100%;
            padding-top: 8px;
            min-height: 24px;
            text-align: center;
        }

        .success, .error {
            display: none;
            font-size: 13px;
        }

            .success.visible, .error.visible {
                display: inline;
            }

        .error {
            color: #E4584C;
        }

        .success {
            color: #666EE8;
        }

            .success .token {
                font-weight: 500;
                font-size: 13px;
            }
   

Open in new window

0
Kyle AbrahamsSenior .Net DeveloperCommented:
You need to answer "what changes when the screen width changes?".  

If it IS affected by screen width, it should be wrapped / duplicated in the individual screen conditions.

If it's NOT affected by the screen width, leave it as one style, not wrapped.


It's similiar to doing this:

int x;
int y;
bool test;

if (test)
   { 
     x = 2;
     y = x * 2;
   }
else
  {
    x = 2;
   y = x *3;
  } 

Open in new window


could be refactored to:
int x;
int y;
bool test;

x = 2;  // applies to everything, don't wrap.

if (test)
   y = x * 2;  //this changes, so needs to be in the appropriate if statement.
else
   y = x * 3;

Open in new window


Hope I'm making sense.

At the basic level you could duplicate everything into each one, but then you have to modify it multiple places.  I prefer to factor it out so that you have global styles that apply to everything and then individual styles that apply to the different screen sizes.
0
Larry Bristersr. DeveloperAuthor Commented:
Thanks... I will slog on through
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.