I started my first site from making mobile version. After that, i tried to add #media screen and (min-width: 500px) for desktops, but after that my mobile site looks like desktop. I don't understand why and don't know how to fix it. I kept mozilla's tutorials and that's it.
/* CSS */
body{
background-color: yellow;
display: flex;
margin: 1em;
flex-flow: row wrap;
}
html{
font-family: sans-serif;
}
header{
order: 0;
background-color: black;
color:blanchedalmond;
font-size: 3em;
padding: 0.5em 1em;
border-radius: 1em;
}
header nav{
border-top: 1px solid #999;
margin-top: 0;
}
header ul{
list-style: none;
padding: 0;
margin: 0;
}
...............
#media screen and (min-width: 500px)
{header{
display: flex; /* separate the nav and title */
justify-content: space-between;
align-items: center;
font-size: 1em;
width: 100%;
}
header ul {
display: flex; /* mav navigation display using flexbox */
}
header li {
margin: 0; /*remove the margin used in the mobile design */
}
header nav{
border:0;
}
}
Thanks in advance
if you want to make mobile first website you should
declare a max-width media-queray first at the above code and then the rest of your code will be applied to the desktop version
if you want to understand how both of them works
read below
Media Queries Demystified: CSS Min-Width and Max-Width
for mobile version.
#media screen and (max-width: 500px)
and then the rest of your code will apply for desktop-version
Related
I have been trying to figure this out, and just don't see what is wrong. So frustrating, but wanted to see if anyone can see why when resizing the browser window, the site is not responsive. However, inside of Chrome's and Firefox's inspector tools, I am able to see the website being responsive with different device sizes. I have been using #media screen (max-width) NOT device-width, which I know can cause this issue. I appreciate the help!
/***MEDIA QUERIES*****/
#media screen (max-width: 880px) {
#location-icon {
margin: 5px 10px 90px 0;
}
}
#media screen (max-width: 760px) {
.first-footer {
flex-direction: column;
}
#location-icon {
margin: 5px 10px 40px 0;
}
.copyright {
margin: 0;
}
.first-footer {
padding-bottom: 0;
}
}
#media screen (max-width: 375px) {
.intro {
flex-direction: column;
}
.intro img {
width: 100%;
}
.intro div {
padding-right: 0;
padding-bottom: 20px;
text-align: center;
}
.intro button {
margin: 40px 0;
}
.logo-button button {
padding: 20px;
width: 200px;
}
.logo-button img {
width: 100px;
}
.box {
flex-direction: column;
padding: 30px 40px;
text-align: center;
}
.mid-text {
order: 2;
padding: 0;
}
#location-icon {
margin: 5px 10px 100px 0;
}
.list1 {
margin: 30px 0 0 0;
}
.list2 {
margin: 0;
}
.icons {
align-self: center;
text-align: center;
margin-top: 30px;
}
.copyright {
margin: 0;
}
.first-footer {
padding-bottom: 0;
}
}
First off, you need to add "and" when you write a media query with two conditions like this :
#media screen and (max-width: 880px)
However the reason it isn't working is due to your container class in the body tag. If you remove it, it will fix most of your issues since there is no reason to use grid in that context
Trying to make our wordpress theme responsive, starting off by adding
<meta name="viewport" content="width=device-width, initial-scale=1" />
within the header's head tags, and it has this effect on the footer...
any way of sorting this out? thank you in advance
You can not make site resposnive adding viewport to head of it.
Try with using media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
AND you can use framework such as bootstrap:
https://getbootstrap.com/
You can add this code to additional CSS for now
#media only screen and (max-width: 768px) {
#footer {
float: left;
background: url(images/footer.jpg) 50% 0;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
#footer p {
float: left;
width: 100%;
margin: 40px 0 0 0;
text-align: center;
color: #b5b5b5;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 18px;
}
}
On responsive website, I would like to display a vertical menu on smaller screens and a horizontal menu on larger screens.
Currently, the following HTML and CSS code does NOT display a vertical menu on smaller screens. Can any one please revise/improve this code? Thanks in advance.
#menu {
width: 100%;
min-height: 40px;
position: relative;
background-color: rgb(52, 85, 154);
}
#menu a {
display: inline-block;
padding: 10px 4% 0px 4%;
font: 400 16px/32px 'Courier', sans-serif;
min-height: 40px;
color:white;
text-decoration: none;
font-weight:bold;
transition: .5s;
}
#menu a:hover {
color: red;
background-color: blue;
}
#media screen and (max-width:640px) {
#menu {
max-width: 100%;
}
}
#media screen and (max-width:775px) {
#menu a {
max-width: 100%;
padding: 0px 5px 0px 5px;
float: none;
text-align: center;
}
}
#media screen and (max-width:980px) {
#menu {
max-width: 100%;
}
}
<body>
<nav id="menu"> Home About Services Blog Links FAQ Contact
</nav>
</body>
When creating a responsive site, the main navigation is usually the trickiest because of the often requirement to display the items vertically (and within a hamburger dropdown/flyout) on a mobile screen and then horizontally on a desktop screen
The first step is to develop it using a mobile first approach. This means:
Style everything so that it looks good on a small screen
Use media queries to progressively style larger screen sizes
Here is a basic snippet of how to style a menu so that it shows vertically in a small screen and horizontally in a large screen.
/* Mobile style first */
.menu {
text-align: center;
}
.menu a {
display: block;
padding: 10px;
}
.menu a:hover {
background-color: #eee;
}
/* Desktop style after */
#media (min-width: 600px) {
.menu a {
display: inline-block;
}
}
See this jsFiddle for an example
add a display: block; declaration here:
#media screen and (max-width:775px) {
#menu a {
max-width: 100%;
padding: 0px 5px 0px 5px;
float: none;
text-align: center;
display: block;
}
}
You can try the following code snippets
HTML
just add a span tag right above the nav tag
<span id='trigger'> Menu </span>
CSS
In the initial menu a tag definition change the display to block from inline-block and set float to left.
And then put the following:
#trigger {
display: none;
}
#media screen and (max-width: 560px /* just as an example*/) {
#trigger {
display: block;
}
#menu {
display: none;
}
div.expand {
display: block;
}
#menu a {
float: none;
border-bottom: 1px solid;
}
}
Javascript
jQuery("#trigger").click(function() {
jQuery("#menu").slideToggle(500, function() {
jQuery(this).toggleClass("expand").css('display','500');
});
});
I hope this helps
I'm not familiar with media queries from last 2 days I try a lot and search for several time but still I'm failed to add queries to my style sheet...
I just want to apply media queries into my css for all devices. any one can help me set the proper width and height for all div,table.
here's code
#media only screen and (min-width: 320px) and (max-width: 979px) {
html ,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
/* overflow-x: hidden;*/
text-align: right; direction: rtl;
}
body {
background:#77d5fb;
text-align: center;
font-size: 11px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
opacity: .98;
}
table.body {
width: 950px;
background: #fff;
padding: 10px;
margin-top:70px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-box-shadow:0px 0px 20px #fff;
-webkit-box-shadow:0px 0px 20px #fff;
box-shadow:0px 0px 20px #fff;
min-height:100%;
}
.container{
width:100%;
background:#fff;
min-height:100%;
position:relative;
padding-bottom:105px;
}
#footer{
background:#eee;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:171px;
position:absolute;
}
#Layer1 {
position:absolute;
position:fixed;
top:0px;
width:100%;
height:50px;
z-index:1;
padding-left:0px;
padding-right: 0px;
background: #fff;
text-align: right; direction: rtl;
}
div.content {
width: 950px;
padding: 10px 0px 20px 0px;
text-align: left;
margin-left: auto;
margin-right: auto;
min-height:100%;
}}
<div class="container">
<div id="Layer1">Top Nav</div>
<table cellpadding='0' cellspacing='0' class='body' align='center'>
<tr>
<td><div class='content'>Content here</div></td></tr></table><div id='footer'>Footer</div></div>
It's not very clear what you're after, but for obtaining the responsive design, then you should use % rather than fixed widths, ie - px.
If this isn't what you're after, please create a fiddle.
A side note - setting opacity on the body will affect all the elements that sit on top of it. It's better to use rgba on the background rather than setting opacity.
body {
/* background:#77d5fb;
opacity: .98;*/
background-color: rgba(119,213,251, .98);
text-align: center;
font-size: 11px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
You should remove the 950px, since that will go outside the container if the width of the body is less than 950px. Set these to percentages rather than fixed widths. Also there's no point in using table if you're not using them for their purpose. Use floats with % width values (if needed), rather than table.
table.body {
width: 90%; /* or 100%, depending on what you're after */
/* other css styles */
}
div.content {
width: 90%; /* or 100%, depending on what you're after */
/* other css styles */
}
You start by doing mobile first, like so:
#media (min-width: 320px) and (max-width: 560px) {
// styles here
}
#media (min-width: 768px) and (max-width: 1024px) {
// styles for that size here
}
#media (max-width: 1024px) {
// desktops
}
#media (max-width: 1200px) {
// large desktops
}
If you want orientation, then you need to do:
#media (min-device-width: XXXpx) and (max-device-width: XXXpx) and (orientation:portrait)
*/ or orientation:landscape */ {
// styles
}
Important
You need this in your header before ANY media queries will work
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
I'm sure this is quite a basic question, so apologies in advance as I am new to this.
I am working on a web app that is designed to be mobile first. As all my initial layouts are designed for small screens I have introduced a mobile phone jpg as an <img>. Then I have overlaid my canvas onto this using absolute positioning. This gives me a pseudo mobile screen I can use whilst experimenting with my design without having to constantly test with the handset.
The idea is to then use suitable media queries to which when encountering smaller screens use display:block to prevent the image being displayed.
For a short time I had it working, but now I've broken it (with no backup)) and can't see how! It works alright on the wider desktop screens. The image container is displayed and the backdrop canvas is correctly laid over the top. However the image container is also being displayed on mobile devices (and as there is no absolute position) my real layout is then displayed after the .
The HTML looks like this ...
<div id="container">
<img src='phone.jpg' class="desktop-visible"/>
</div>
<div id="backdrop">
Text
</div>
My CSS is currently this ...
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
#media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
// Portrait tablets and landscape mobiles
#media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
#media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
You're not closing the first media query. :-)
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
#media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
} // you missed this one
// Portrait tablets and landscape mobiles
#media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
#media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}