I am creating a new website, here is the www.qldmetals.com
Everything seems to be fine on website except its responsiveness on iPhone. In iPhone the logo sits over the navigation menu. I tried the following media query, but it doesn't seems to be working for me i.e
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { .logo a.brand { display: block !important; }}
I'm confuse, Is this error because of display method or anything else (like I have to use media query for any other class)
I appreciate your help and your valuable time.
Thank you.
I have seen your website and after that i have created some of my own style element which i am sharing it's only for media screen max width 480px
Following Code
#media (max-width:480px){
.logo a.brand {
display: block !important;
height: auto;
line-height: 30px;
margin: 0;
overflow: hidden;
padding: 0;
width: auto;
}
.logo a.brand img {
float: none;
height: auto;
margin: 2px 8px 2px 0;
width: 100%;
}
header .logo{
float: none;
max-height: none;
text-align: center;
width: 100%;
}
}
Related
I was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page, and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
#media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
#media screen and (min-width: 600px) {
main {
background-color: red;
}
}
#media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>
The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.
The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
The page is not blank, according to your code for screens with width more than 1000px you set this styles:
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
so the h1 and p1 element will not be displayed and the background will be white,
if you resize the window other media queries happen.
Also by Opening your developer tools you are resizing your window.
I'm sure this has been asked but I can't seem to find an example that isn't using SASS. I just have a regular CSS file that I'm working with. I want the burger menu to change to the horizontal menu on the larger size.(#media only screen and (min-width: 64.063em)) I've seen a few posts saying to update the settings.scss file like this(http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss) but again I'm not using SASS for this project. I just can't seem to figure out what is triggering the menu to change from mobile to desktop: media queries or javascript.
If you want to use CSS you can override the Foundation CSS in a separate CSS file (ie:styles.css) section that follows the foundation.css
Demo on Codeply
#media only screen and (max-width: 64.063em) {
.top-bar {
overflow: hidden;
height: 2.8125rem;
line-height: 2.8125rem;
position: relative;
background: #333;
margin-bottom: 0;
}
.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out;
}
.top-bar-section ul {
padding: 0;
width: 100%;
height: auto;
display: block;
font-size: 16px;
margin: 0;
}
.top-bar .toggle-topbar.menu-icon {
top: 50%;
margin-top: -16px;
display:block;
}
.top-bar .title-area {
float: none;
}
}
http://codeply.com/go/OtVVMn0n6V
If you don't want to use SASS, then you'd better change foundation.css file.
Around line 1682 change it from
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:40.063em)/";
width: 40.063em;
}
to
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em;
}
Also around line 2006, change it from
#media only screen and (min-width: 40.063em) {
To
#media only screen and (min-width: 64.063em) {
Last night I worked on making my site mobile optimized. When a user is on a device with less than 684px it should show the mobile nav div and hide the sidebar div. I have tested this as working on my computer (by shrinking chrome like an accordion). I also checked https://www.google.com/webmasters/tools/mobile-friendly/?url=www.kisnardonline.com to see my status, but it says my site is not mobile friendly(I realize my links together is likely valid/viewport too). I will make the links more spread once I get it working overall. Thanks for any help!
Here is my code(http://www.kisnardonline.com/wp-content/themes/mytheme/style.css):
#wrapper {
display: block;
min-width: 684px;
max-width: 1200px;
width: 98%;
margin: 0px auto; }
#media screen and (max-width: 684px) {
#wrapper {
min-width: 0px; /* show under 684px - mobile */
}
}
#content {
width: 74%;
float: right; }
#media screen and (max-width: 684px) {
#content {
width: 100%; /* show under 684px - mobile */
}
}
#mobilenav {
display: none;
margin: 15px auto;
padding: 10px 10px 10px 10px;
border-radius:20px;
border:3px solid #a1a1a1;
background:#1C2939; }
#media screen and (max-width: 684px) {
#mobilenav {
display: block; /* show under 684px - mobile */
}
}
#sidebar {
display: block;
width: 23%;
min-width: 170px;
max-width: 210px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: left; }
#media screen and (max-width: 684px) {
#sidebar {
display: none; } /* hide under 684px - mobile */
}
Here is my desktop (greater than 684px view):
Here is my desktop (less than 684px view):
Here is my mobile view(Samsung Galaxy S6):
For responsive pages you need to add a viewport tag which tells the device how to display the content:
<meta name="viewport" content="width=device-width, initial-scale=1">
For your other question, the "request desktop site" won't work the way you have it set up. That feature is for if you have 2 separate sites(one for mobile and one for desktop). For instance the mobile site would be m.kisnardonline.com and would have different files than the desktop site.
I'm writing a static website and testing it locally. I have written a media query to change the layout a little bit so that it is much nicer to look at on a smartphone. With the media query my aim is to change the text and the profile photo from being side by side to being one followed by the other.
My issue is that when I load the HTML file on Chrome or Firefox and resize the window, the layout does not change and I cannot figure out how to fix it. Any help would be much appreciated. Find my code below.
For my standard CSS I have this (a small snippet):
#about-text {
/*A div containing paragraphs and a table*/
display: inline-block;
width: 50%;
}
#profile-photo {
/*An img tag after the closing about-text div*/
border: 4px solid #1abc9c;
display: inline;
float: right;
margin: 8% 0% 0% 0%;
max-width: 40%;
}
And then I have a media query and the corresponding CSS:
#media (min-device-width : 320px) and (max-device-width : 480px) {
#about-text {
/*A div containing paragraphs and a table*/
display: block;
width: 50%;
}
#profile-photo {
/*An img tag after the closing about-text div*/
border: 4px solid #1abc9c;
display: block;
float: right;
margin: 8% 0% 0% 0%;
max-width: 40%;
}
}
You are using min-device-width and max-device-width which only takes into the account the device's screen size. Use min-width and max-width and it will work in your browser when you resize.
Example:
.testDiv {
color: green;
}
#media (min-width : 320px) and (max-width : 480px) {
.testDiv {
color: red;
}
}
http://jsfiddle.net/ZUPD2/
Maybe because there is no closing bracket for the media query block ?
Hello when I go and view my website my mobile view for my menu is still showing. I want it to go back to normal. after 768px;
I have looked every where can find out why its doing it like that.
http://codepen.io/mwbcomputers/pen/jvpcq
You have display: none; within your media query for 1024
#media only screen and (max-width: 1024px) {
#container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.nav {
display: none;
}
// more css
Remove the following code from the media query
.nav {
display: none;
}