I have just uploaded my website onto a hosted server with 1&1. The problem I am having is I cannot seem to find out why the media query rules I have set are now not working / are ignorned.
I have tested on my iphone 5 but my website does not scale as it should. However when I resize my browser (Google Chrome) on my desktop to tablet and mobile sizes it does scale correctly.
Is there any reason why when I resize my browser it works perfectly but when I test it on a mobile device it does not work / scale properly?
Just for extra info I am using wordpress and I include my css files in the right way through the functions.php file.
My website is www.jamieclague.com, please feel free to look at the source code.
Thanks for any help, much apprciated.
header.php
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?>Jamie Clague - Freelance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- CSS Stylesheet Link ------>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
CSS - styles.php (snippet of the code)
#media only screen
and (min-device-width:401px)
and (max-device-width:480px){
.header{
min-height:520px;
}
.banner-matter {
top: 22%;
width:100%;
}
.banner-matter p {
overflow: hidden;
width: 100%;
}
}
#media only screen
and (min-device-width:321px)
and (max-device-width:400px) {
.banner-matter h2 {
font-size: 27px;
}
.banner-matter p {
font-size: 20px;
}
a.more span {
left: 30%;
}
}
#media only screen
and (min-device-width:220px)
and (max-device-width:320px) {
img.scroll {
margin-top: -0.7em;
}
a.more {
background-size: 92%;
width: 180px;
height: 64px;
font-size: 1.15em;
}
.view {
padding: 0.3em 0 0;
}
a.more span {
left: 27%;
top: 27%;
}
}
Update
A couple of suggestions.
If you use web inspector you'll see a number of 404s, including
http://www.jamieclague.com/js/jquery.contentcarousel.js
http://www.jamieclague.com/js/jquery.mousewheel.js
http://www.jamieclague.com/wp-content/themes/portfolio/style.css
and a jQuery error from line 113
$ is not a function. (In '$(document)', '$' is undefined)
As a starting point it would be good to fix these.
Also, if I look in http://www.jamieclague.com/wp-content/themes/portfolio/css/style.css?ver=4.6, I'm not sure if you have a closing curly bracket for the statement that starts at line 1813
#media only screen and (max-width:993px){
...
You need a viewport meta tag in the head of your document, without this the default behaviour for mobile devices will be to scale the page to fit your screen.
Something like the following will get you started.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
Find out more about settings you can use: http://www.w3schools.com/css/css_rwd_viewport.asp
Good luck!
Related
I want to add footer in react which is tuck to the bottom of the page(not position: fixed ) when content is more I should see footer after scrolling till end and if content is less then it should display at the bottom. How to do it in React.js?
This can be done by making your footer a component and giving it the class as described here
You can use CSS do the trick with the power of flexbox and min-height.
Basically, a .wrapper for your container having minimum height of 100% of the vertical height, ie: 100vh, then the children components or elements (eg. .navbar, .content and .footer) sharing the height, you can make the .content assume the remaining height of the .wrapper while the other components assume the size of themselves, see below snippet for solution.
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1 1 0%;
background-color: whitesmoke;
}
/* You can ignore the styling below */
.app {
font-family: sans-serif;
}
.footer, .navbar, .content {
padding: 20px;
text-align: center;
border: 1px solid rgba(0,0,0,0.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Landing Page Flexbox Layout With Navbar Full Height Content And Footer Sticky To The Bottom</title>
</head>
<body>
<div class="app wrapper">
<div class="navbar">
Navbar
</div>
<div class="content">
<h1>Content</h1>
<h2>Takes remaining height and grows if needed!</h2>
</div>
<footer class="footer">
Footer
</footer>
</div>
</body>
</html>
You can read more about flexbox here: W3schools CSS Flexbox
You can also play around with this sandbox I created for ReactJS applying the above styles: Codesandbox
The behaviour you need looks exactly like the sticky position in css.I recommend using pure css here:
footer{
position: sticky;
}
See more here
I am designed responsive application for mobile, tablets and desktops using
AngularJS v1.5.8
Bootstrap version: '3.3.7'
Angularui-bootstrap Version: 2.1.4
I am handing responsive behavior using CSS media query with viewport size like
#media (min-width: 786){
body {
font-size: 0.80vw !important;
}
.dropdown-menu {
font-size: 0.80vw !important;
}
.form-control {
font-size: 0.80vw !important;
height:2.0vw !important;
}
.control-label {
font-size: 0.80vw !important;
}
}
And using Bootstrap Column like
<div class="col-xs-0 col-sm-2 col-md-2 col-lg-2"></div>
I have added the meta tag in my Layout page
<meta name="viewport" content="width=device-width, initial-scale=1">
and I have tried following as well
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Problem :- In mobile viewport [Especially Android] when I click any control of page, Control gets zoom out and webpage fonts get zoom in (font become so small to read) -- see below image.
Click here to view image
How can I fix this font zoom in/scaling issue ???
Test mobile device have Android version 6.0.1
Below is the image for reference. When we click on control font size shrinks.
this is its code it is only occupying 1/3rd of the browser page when seen through android chrome browser,Xperia z1
please someone suggest some changes
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style type="text/css" >
*{
margin:0;
}
html {
background: url('Startupal coming soon4.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (max-width: 600px) {
img src="Startupal coming soon4.jpg" {width: 100%; height: 100%; margin: 0; padding; 0;}
}
}
</style>
</head>
<body>
</body>
</html>
this is the whole code,it works fine on pc but not on the cell phone
Use a javascript script tag or file and update the width and height of the html body element each time the page is resized.
I usually use window.innerWidth and innerHeight because it is cross compatible and seems reliable.
window.addEventListener("resize", onResize);
function onResize(){
document.body.width = window.innerWidth;
document.body.height = window.innerHeight;
}
Example template: ANDROID.COM MDL SKIN - getmdl.io/templates/android-dot-com/index.html
github: android.com sample
This fixed-header on mobile. Screenshots
How do I get the address bar hide (scrolls)? Number 2 in the screenshot.
I had the problem that the browser address bar would not auto-hide on mobile browsers (Chrome on Android) using an mdl-fixed layout.
I solved the problem adding my own stylesheet after the mdl-stylesheets in the header section of the .html file:
<head>
<link rel="stylesheet" href="mdl/material.min.css" />
<link rel="stylesheet" href="styles.css" />
</head>
In the styles.css file, I added:
#media screen and (max-width: 850px) {
.mdl-layout__container {
position: static;
}
}
.mdl-layout__header{
position: fixed;
}
Internal issue. Can't be fixed until Layout is completely refactored.
Ref: https://github.com/google/material-design-lite/issues/1072
There are no curved borders. IE9 and above works fine.
http://cscsu.org.uk/WiltshireMedicinesManagement/csu.htm is a very stripped down version of what I have
<!DOCTYPE html>
<html lang="en-US">
<head>
<style type="text/css">
.wpdm-metro {
behavior:url(/border-radius.htc);
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
margin-bottom:2px;
margin: 0 5px 7px 0;
height:120px;
width:45%;
background:#66cc33 !important;
color:white !important;
}
</style>
</head>
<body>
<div class="wpdm-metro">
</div>
</body>
</html>
Am I doing anything obviously wrong? The file exists (border-radius.htc) and I've even added AddType text/x-component .htc to .htacccess
For whatever reason, PIE won't work unless you remove !important from the background rule.
Though I haven't seen this mentioned in the documentation it worked for me when faced with an almost identical issue.
.wpdm-metro {
behavior:url(/border-radius.htc);
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
margin: 0 5px 7px 0;
height:120px;
width:45%;
background:#66cc33;
color:white;
}