I tried the following css to handle the safe area in Iphone X. It works fine, but while scrolling back to top, it shows web content under the status bar:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
padding-top: 50px;
padding-bottom: 58px;
background: #fff;
}
header {
position: fixed;
top: 0;
width: 100%;
display: block !important;
background: #FFF;
padding: 0;
padding-top: 5px;
direction: ltr;
height: 45px;
box-shadow: 1px 0 5px 0 #444;
z-index: 1040;
transition: top 0.2s ease-in-out;
}
#supports(margin: max(0px)) {
body {
margin-top: max(30px, env(safe-area-inset-top));
margin-bottom: max(15px, env(safe-area-inset-bottom));
}
}
#supports(top: max(0px)) {
header {
top: max(30px, env(safe-area-inset-top));
}
}
Any idea how to fix the issue?
Related
I'm using Mkdocs with material theme for products documentation on my company. I'd made some customize on the original theme using the extra.css file.
When people navigate on my site on web browser it's working ok.
When they navigate on mobile devices, the extra.css is not working, or having a very strange behavior.
On the images of mobile devices, the left side is when I open the menu. The right side is when I click in a link in the menu.
Here is my extra.css file.
.md-header__button.md-logo :-webkit-any(img,svg) {
display: block;
width: auto;
height: 2rem;
fill: currentColor;
}
.md-nav--primary {
font-size: .75rem;
line-height: 1.5;
background-color: #0000cc;
border-color: #eee;
border-width: thin;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding-top: .6rem;
padding-bottom: .6rem;
}
.md-header {
background-color: #0000cc;
}
input.md-search__input {
width: 100%;
height: 1.8rem;
padding-left: 2.2rem;
font-size: .8rem;
opacity: 1;
background-color: rgba(0,0,0,1);
border-radius: 16px;
text-align: left;
letter-spacing: 0px;
color: #ffffff;
opacity: 1;
}
.md-search__input:hover {
background-color: rgba(0,0,0,1);
}
.md-search-result__teaser {
display: -webkit-box;
max-height: 2rem;
color: #00348b;
margin: .5em 0;
overflow: hidden;
font-size: .64rem;
line-height: 1.6;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
[data-md-toggle=search]:checked~.md-header .md-search__input {
text-overflow: clip;
background-color: var(--md-default-bg-color);
border-radius: .1rem .1rem 0 0;
color: #00348b;
}
.md-search-result__meta {
padding: 0 .8rem;
color: #00348b;
font-size: .64rem;
line-height: 1.8rem;
scroll-snap-align: start;
}
.md-nav--primary, .md-nav--secondary {
font-size: .75rem;
line-height: 1.5;
background-color: #eee;
-moz-border-radius: 8px;
border-radius: 8px;
padding-top: .6rem;
padding-bottom: .6rem;
background: #00348B 0% 0% no-repeat padding-box;
}
.md-nav__title {
display: block;
padding: 0 .6rem;
overflow: hidden;
font-weight: 700;
text-overflow: ellipsis;
color: #ffffff;
}
.md-nav__item .md-nav__link--active {
text-align: left;
font: normal normal normal 14px/18px Open Sans;
letter-spacing: 0.35px;
color: #FFFFFF;
opacity: 1;
}
.md-nav__item--nested>.md-nav__link {
color: #FFFFFF;
}
.md-nav__link {
display: block;
margin-top: .625em;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: color 125ms;
scroll-snap-align: start;
text-align: left;
letter-spacing: 0.33px;
color: #FFFFFF;
opacity: 1;
}
.md-nav__link[data-md-state=blur] {
color: #d5d5d5;
}
.md-footer {
color: #FFFFFF;
background : #00348B 0% 0% no-repeat padding-box;
}
.md-float-right {
height: 100%;
margin: 430px 0 0 650px;
display: inline-block;
align-items: flex-end;
position: fixed;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
text-align: justify;
}
I am trying to make my page mobile responsive but something is off. I had to change position of my nav-menu from absolute to relative for nav menu to go to the right top corner but now im having issues with the responsive part as well as the collapse of menu. i have been in tutorial hell trying to understand relative and absolute. I thought I had it but this proves i do not
/* make for mobile*/
.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 15px;
z-index: 9998;
border: 0;
background: none;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #ffff;
}
.mobile.nav {
position: fixed;
top: 55px;
right: 15px;
bottom: 15px;
z-index: 0;
overflow-y: auto;
background: rgba(0,0,0,0.7);
}
The rest of the script :
body {
font-family: "open sans",sans-serif;
background-color: #040404;
color: #fff;
position: relative;
background: transparent;
}
body::before {
content: "";
position: fixed;
background: #040404;
left: 0;
background-size: cover;
right: 0;
top: 0;
height: 100vh;
z-index: -1;
}
#media (min-width: 1024px){
body::before {
background-attachment: fixed;
}
}
a {
color: #18d26e;
}
a:hover {
color: #18d26e;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Railewa", sans-serif;
}
/*==========Header=======*/
#header {
transition: ease-in-out 0.3s;
position: relative;
height: 100vh;
display: flex;
align-items: center;
z-index: 997;
overflow-y: auto;
}
#header * {
transition: ease-in-out 0.3s;
}
#header h1 {
font-size: 48px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
font-family: "poppins",sans-serif;
}
#header h1 a,
#header h1 a:hover {
color: #fff;
line-height: 1;
display: inline-block;
}
header h2 {
font-size: 24px;
margin-top: 20px;
color: rgba(255,255,255,0.8);
}
#header h2 span {
color: #fff;
border-bottom: 2px solid #18d26e;
padding-bottom: 6px;
}
#header h2 span:hover {
color: #ffff;
border-bottom: 2px solid #ff28f4;
padding-bottom: 6px;
}
#header .social-links {
margin-top: 40px;
display: flex;
}
#header .social-links a {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255,0.1);
color: #ffff;
line-height: 1;
margin-right: 8px;
border-radius: 50%;
width: 40px;
height: 40px;
}
#header .social-links a:hover {
background: #18d26e;
}
/*make it resposive*/
#media (max-width:992px) {
#header h1 {
font-size: 36px;
}
#header h2 {
font-size: 20px;
line-height: 30px;
}
#header .social-links {
margin-top: 15px;
}
#header .container {
display: flex;
flex-direction: column;
align-items: center;
}
}
I am wondering why I can't move my .workButton to the center :D? I have tried text-align, or margin:0 auto, but nothing seems to work...
If you see some mistakes/or something that could be done differently, let me know, please!
Any tips would be really helpful!
Here is the link to the code (i wrote it in scss)
* {
margin: 0;
padding: 0; // box-sizing: border-box;
}
body {
font-family: "Titillium Web", sans-serif;
}
.container {
max-width: 1140px;
width: 100vw;
height: 100vh;
margin: 0 auto;
overflow: hidden; // grid-template-rows: 600px 750px 900px 650px 1420px 900px 820px 100px;
}
#hero {
max-height: 600px;
height: 100vh;
background-color: #87509c;
h1 {
text-align: center;
color: #f7f3ea;
font-size: 42px;
line-height: 50px;
margin-top: 140px;
margin-bottom: 60px;
}
.workButton {
text-align: center;
font-size: 18px;
font-weight: 600;
color: #ffffff;
padding: 20px 80px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid #eb7d4b;
border-radius: 5px;
background-color: #eb7d4b;
box-shadow: 0 2px #c86a40;
}
}
.navbar {
display: flex;
margin: 60px 20px 20px 40px;
ul {
margin-left: auto;
list-style-type: none;
align-self: center;
li {
float: left;
a {
text-decoration: none;
color: #ffffff;
padding: 5px 20px;
text-transform: uppercase;
transition-duration: 1.5s;
}
a:hover {
background-color: #643a79;
border-radius: 3px;
transition-duration: .4s;
}
}
}
}
https://codepen.io/anon/pen/ZvXZLe
Apply text-align: center to your #hero wrapper and your link will center just fine.
The <a></a> does'nt has specific width. So, just add on .workButton,
#hero {
.workButton {
width: 100px;
text-align: center;
}
}
That's it...Thank You...
Why is it that when I test my page out on Chrome Canary emulating the iPad I get this result,
But when testing it out on the real device I get this
I'm trying to achieve the top one, but can't for some reason. Any ideas? Also is Chrome Canary reliable? Here's the CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fff;
color: #7b8993;
font: 300 87.5%/1.5em 'Open Sans', sans-serif;
}
.form-wrapper {
padding-top: 10%;
border-radius: 2px;
margin: 50px auto;
position: relative;
width: 375px;
}
form {
padding: 30px 20px 0;
}
.form-item {
margin-bottom: 10px;
width: 100%;
}
.form-item input {
border: 1px solid #ccc;
border-radius: 2px;
color: #000;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
height: 50px;
padding: 0 16px;
transition: background 0.3s ease-in-out;
width: 100%;
}
.form-item input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.button-panel {
margin: 20px 0 0;
width: 100%;
}
.button-panel .button {
background: #009dff;
border: none;
border-radius: 2px;
color: #fff;
cursor: pointer;
height: 50px;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
transition: background 0.3s ease-in-out;
width: 100%;
}
.button:hover {
background: #00c8ff;
}
#media only screen
and (max-width : 320px) {
.form-wrapper {
padding-top: 10%;
border-radius: 2px;
margin: 50px auto;
position: relative;
width: 320px;
}
}
.cent {
text-align: center;
color: #000;
}
.view {
text-align: center;
text-decoration: none;
color: #7b8993;
padding-top: 5px;
}
#ref {
text-align: center;
text-decoration: none;
color: #7b8993;
padding-top: 8px;
font-size: 16px;
}
#ref:hover {
text-align: center;
text-decoration: none;
color: #009dff;
-webkit-animation: hue 60s infinite linear;
padding-top: 8px;
font-size: 16px;
}
You need to add the following to the button element in order to remove the default styling.
-webkit-appearance: none;
I cant seem to figure out why the h1 tag is showing differently on mobile browsers.
The site is www.jd-financialservices.co.uk When I view the site on my desktop everything is fine. When I view it on my Nexus 4 however, the 10px gap between h1 and the .topbar div has gone. It's the same on Opera, Firefox and Chrome.
Can anyone help please?
Thank you in advance.
I would advise against using position:relative; and negative top on all of your elements.
With some minor changes to your css you will probably find that it fixes itself: here is my updated version of your css. See if that fixes things.
I updated: aside nav h1 .welcome and footer. By changing some of the header elements to use position:absolute and then using margin to space elements out. You will probably find the css is more compatible cross-browser/device.
#font-face { font-family: 'Constantia'; src: url('constantia/constantia.eot'); src: url('constantia/constantia.eot?#iefix') format('embedded-opentype'), url('constantia/constantia.svg#Constantia') format('svg'), url('constantia/constantia.woff') format('woff'), url('constantia/constantia.ttf') format('truetype'); font-weight: normal; font-style: normal;}
* {
margin-top: 0px;
margin-bottom: 0px;
}
html {
font-family: 'droid sans';
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
body {
width: 940px;
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
}
header a:hover {
text-decoration: none;
}
h1 {
font-family: 'Constantia', helvetica;
position: absolute;
top: 20px;
}
header {
height: 140px;
position: relative;
margin-bottom: 40px;
}
nav {
width: 660px;
height: 30px;
background-color: #00788a;
position: absolute;
font-size: 1.2em;
bottom: 0;
right: 0;
}
nav li a {
color: #ffffff;
}
nav a:hover {
text-decoration: underline;
}
nav ul {
padding-left: 0px;
}
nav ul li {
display: inline;
line-height: 30px;
vertical-align: middle;
color: #ffffff;
padding-left: 70px;
padding-right: 65px;
}
aside {
height: 600px;
width: 240px;
float: left;
background-color: #00788a;
color: #ffffff;
clear: both;
position: relative;
text-align: center;
margin-bottom: 30px;
}
article a {
color: #00788a;
}
.contain {
width: 940px;
}
footer {
height: 100px;
clear: both;
background-color: #00788a;
color: rgba(255,255,255,0.5);
position: relative;
font-size: 0.85em;
padding: 0 10px;
line-height: 1.5em;
margin-top: 40px;
}
footer li {
display: inline;
border-left: 2px solid rgba(255,255,255,0.5);
padding: 0 5px;
}
footer li:first-child {
border: none;
}
footer ul {
padding-left: 0;
text-align: center;
}
.foot_fade {
color: rgba(255,255,255,0.5);
}
.first_initial {
font-size: 110px;
color: #00788a;
font-weight: lighter;
}
.second_initial {
font-size: 101px;
color: #00788a;
font-weight: lighter;
position: relative;
top: -6px;
}
.rest_of_title {
font-size: 26px;
position: relative;
left: -73px;
top: 20px;
font-weight: lighter;
}
header a {
color: #000000;
}
.header_background {
float: right;
position: relative;
z-index: -1;
}
.topbar {
width: 940px;
height: 30px;
background-color: #00788a;
}
.call_now {
padding: 10px 50px 10px 50px;
font-size: 1.5em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.home_service {
padding: 10px 40px 10px 40px;
font-size: 1.45em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.service_list {
font-size: 1.25em;
line-height: 3em;
text-align: left;
padding-top: 35px;
padding-left: 20px;
text-shadow: 2px 2px 2px #2a2a2a;
}
.welcome {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
font-size: 0.9em;
line-height: 2em;
color: #2a2a2a;
position: relative;
/* top: -95px; */
text-align: justify;
}
.services {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
position: relative;
top: -95px;
}
.services a {
text-decoration: none;
position: absolute;
top: 151px;
left: 0;
width: 275px;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
padding: 10px 0 10px 10px;
}
.services div {
margin-bottom: 15px;
}
.services div:last-child {
margin-bottom: 0;
}
.savings_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire_pic {
position: absolute;
top: 0;
right: 0;
height: 190px;
width: 285px;
}
.protection_pic {
position: relative;
height: 190px;
width: 285px;
}
.insurance_pic {
position: absolute;
top: 205px;
right: 0;
height: 190px;
width: 285px;
}
.mortgage_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire {
width: 300px;
float: right;
margin: 0 0 10px 10px;
}
/*.shadow {
box-shadow: 0 0 3px 1px rgba(42,42,42,0.5);
margin: 3px 0;
}*/
.overlay {
background-color: rgba(0, 0, 0, 0.5);
bottom: 54px;
color: #FFFFFF;
padding: 10px;
position: relative;
width: 265px;
}
.overlay a {
text-decoration: none;
color: #ffffff;
}
.overlay a:hover {
}
.left {
float: left;
}
.right {
float: right;
}
.regulation {
font-style: italic;
color: #9a9a9a;
font-size: 0.9em;
}
.smallprint {
width: 520px;
font-size: 0.9em;
text-align: center;
position: absolute;
right: 210px;
top: 30px;
}
.copyright {
width: 310px;
margin: 0 auto;
}
.scapa {
position: absolute;
bottom: 0;
right: 10px;
font-size: 0.9em;
}