I have an padding for body (desktop) but i need to change it to fit at mobiles
this is the body css:
.column{
float:left;
width:50%;
max-height:376px;
padding-left:10%;
}
and this is the part for mobile at the same css file:
#media all and (max-width : 480px) {
.column{
padding-left:-5%;
}
}
why this didn't change anything?
You can change the padding to 0px on mobile and then add a negative margin if you are looking to move the .column element to the left.
#media all and (max-width : 480px) {
.column{
margin-left: -5%;
padding-left:0;
}
}
Related
Codepen here: https://codepen.io/codepenuserpro/pen/ExQrEbo
HTML:
<div></div>
CSS:
div
{
height:400px;
width:400px;
background-color:red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px)
{
background-color:blue;
}
Why isn't the div changing background color even when I resize the browser window to between 1068 - 1380px?
Media Query Syntax
A media query consists of a media type and it can contain one or more expressions, which resolve to either true or false.
If it resolves to true, the css code inside of it is applied.
#media not|only mediatype and (expressions) {
<stylesheet>
}
You must select the element- div in this case, inside the media query as of the following.
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color:blue;
}
}
div {
height: 400px;
width: 400px;
background-color: red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
<div></div>
You need to select the selector(div) inside media query.
try this:
#media only screen and (min-width: 1068px) and (max-width: 1380px){
div{
background-color:blue;
}
}
You didn't select the div in the second approach.
You may want to have this:
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
I'm sure there is a simple answer to this question. Instead of having the left div appear first on mobile (media queries), as it naturally would, how would I make the right div appear first instead?
The left div would appear first on desktop view.
<style>
.left {
width:27%;
float:left;
}
.right {
width:70%;
float:right;
}
</style>
<div id="tier-1">
<div class="left"></div>
<div class="right"></div>
</div>
Just write the right div first.
Use a media query. Like this:
#media (max-width 500px){
.right{
float: left;
}
}
Of course, 500px could be anything. Chrome developer tools let you emulate different sizes and even have some preset phone resolutions. Nonetheless, You could completely change how everything is formatted with media queries.
See this description from w3 schools.
by using media queries we can change the css value of all the html elements.
commonly media queries are write in 4 common screens . also customization is possible .
#media only screen and (min-width : 1200px) {
}
#media only screen and (max-width: 992px) {
}
#media only screen and (max-width: 767px) {
}
#media only screen and (max-width: 479px) {
}
#media only screen and (min-width : 1200px) {
}
#media only screen and (max-width: 992px) {
}
#media only screen and (max-width: 767px) {
}
#media only screen and (max-width: 479px) {
}
for mobile device 767(landscape) and 479(portrait). use below media query for your question.
#media only screen and (max-width: 479px) {
.left {
width: 27%;
float: left;
height: 50px;
background-color: #393318;
color: #fff;
text-align: center;
}
.right {
width: 70%;
float: right;
height: 50px;
background-color: green;
color: #fff;
text-align: center;
}
#media only screen and (max-width: 479px) {
.right {
float: left;
}
.left {
float: right;
}
}
}
<div class="left">leftdiv</div>
<div class="right">right div</div>
Thank you everyone for your contributions, but I ended up finding a solution on this URL: Use CSS to reorder DIVs
I used the CSS3 Flexbox Layout Module. Thank you again!
I'm trying to make a background image fill up (in height) when going mobile. When I make the browser smaller, it doesn't seem like my media queries are kicking in.
Here's what my css looks like:
#main {
background-image:url(../images/cc.jpg);
height:650px; background-size:cover;
background-position:0 -210px;
background-repeat:no-repeat;
}
#main .row {
margin-top:200px;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#footer {
font-size:10px;
}
#main {
background-image:url(../images/cc.jpg);
height:100%;
background-size:cover;
background-repeat:no-repeat;
}
#id{ margin-top:90px; }
#main .row {
margin-top:100px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
#footer {
font-size:10px;
}
#main {
background-image:url(../images/cc.jpg);
height:100%;
background-size:cover;
background-repeat:no-repeat;
}
#id{ margin-top:90px; }
#main .row {
margin-top:100px;
}
}
Here's the URL if you want to see what the page looks like:
http://www.gulflifehomes.com/
Change to background-position: center; and that should do the trick. Also, you should try and one-line your code when possible background: url(../images/cc.jpg) no-repeat center center fixed;.
If you want to test media queries on desktop, you should use min-width or max-width instead of min-device-width or max-device-width.
So do this:
#media only screen and (min-width : 320px) and (max-width : 480px)
min-device and max-device refers to the ACTUAL resolution of your screen (ie: 1280x800) instead of the size of your browser. This is why your media queries isn't kicking in when resizing browser and testing on your machine.
Remove the background-position rule or reset it to 0 for mobile if you still want it in place for desktop.
You have a lot of repetitive code there. You could just do this:
#main {
background-image:url(../images/cc.jpg);
height:650px; background-size:cover;
background-position:0 -210px;
background-repeat:no-repeat;
}
#main .row { margin-top:200px; }
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#footer { font-size:10px; }
#main { background-position: 0; }
#id{ margin-top:90px; }
#main .row { margin-top:100px; }
}
I have a stylesheet and for some reason my media queries are not being detected. When I resize my browser and Inspect Element, I'm still seeing the 1060px .container.
here's the part of the stylesheet
.container {
margin: 0 auto;
width: 1060px;
}
.container .section {
margin-top:40px;
width:320px;
margin-left:20px;
float:left;
height:480px;
position:relative;
}
/* Smartphones (portrait and landscape) */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.container {
padding-left:2%;
margin: 0 auto;
width: 96%;
}
.container .section {
width:96%;
display:block;
position:relative;
}
}
You define only smartphone media query. Outside this media query CSS, you must define CSS by this way for larger size.
/* 1080 HD */
#media screen and (max-width: 2048px) {
.container {
margin: 0 auto;
width: 1060px;
}
.container .section {
margin-top:40px;
width:320px;
margin-left:20px;
float:left;
height:480px;
position:relative;
}
}
/* Smartphones (portrait and landscape) */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.container {
padding-left:2%;
margin: 0 auto;
width: 96%;
}
.container .section {
width:96%;
display:block;
position:relative;
}
}
And add following meta tag in element of webpage document.
<meta name="viewport" content="width=device-width, initial-scale=1">
above line point to a media query viewport, so its not find outside defined CSS.
My CSS isn't working on mobile portrait.
I want the main top menu to appear beneath the logo.
Here is my css at the mo:
#media screen and (max-width: 480px) {
#wrapper {
width:100%;
}
#logo {
margin-left: 100px;
}
#menu {
width:100%;
display:inline-block;
}
}
Hi now define your wraper width 100% into 480px as like this
#media screen and (max-width: 480px) {
#wrapper { width:480px; }
#logo {
margin-left: 100px;
}
#menu { width:100%;display:inline-block; }
}