Larry Brister
asked on
@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)
Here is my existing CSS from the <header>
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;
}
}
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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks... I will slog on through
ASKER
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?
Open in new window