I'm using a fixed header on a site to keep the logo & menu elements visible when scrolling the content elements. There appears to be a javascript that creates a "slide" or transistion down to the top of the content from the top/under the header. I find this annoying but can live with it.
My problem is that on iPad devices (works fine on iPhone) using Safari that the content never scrolls to the top of the content area. If you press and drag down on the screen you can see the content is nested under the header. Release the screen and it slides back up under the header.
All other browsers/OS work fine.
I incorporated some CSS that was supposed to handle all mobile devices and configured the elements below the header with padding/margin tags to give it some space. This seemed to work great except on some iPad mobile devices we get a A problem occurred with this webpage so it was reloaded. We remove this CSS and it loads fine.
So that nixes CSS as a fix so it leaves me with the obnoxious slide effect I'm thinking?
What is this slide content element in the first place and how do I make it responsive on all devices including Safari/iPad or how do I remove it or use CSS to correctly start at the top of the content?
Test site: http://www.goroyalshell.net/
UPDATED CSS isolated code that when inserted into the CSS page causes the error:
.property-item.featured:hover .property-item.featured.title-above-image .property-title::after {
background-color: transparent;
}
.property-item .property-thumbnail {
position: relative;
overflow: hidden;
}
.property-item a {
color: inherit;
}
.property-item img {
max-width: none;
width: 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@media (min-width: 768px) {
.property-item img {
width: -webkit-calc(120%);
width: calc(120%);
-webkit-filter: grayscale(0%);
filter: none;
-webkit-transform: translate3d(-10px, 0, 0);
-moz-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
-o-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
}
.property-item figcaption {
top: 0;
height: 100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
@media (min-width: 768px) {
.property-item figcaption {
position: absolute;
text-align: right;
}
}
@media (min-width: 768px) {
.property-item:hover img {
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.property-item:hover.title-over-image .property-title,
.property-item:hover.title-over-image .tag,
.property-item:hover.title-above-image .tag-right {
opacity: 0;
}
}
.property-item:hover .property-excerpt {
opacity: 1;
}
.property-item:hover .property-excerpt::after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.property-item:hover .arrow-right {
opacity: 0;
}
.property-item .property-title {
overflow: hidden;
position: relative;
z-index: 0;
padding: 10px 15px;
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
@media (min-width: 768px) {
.property-item .property-title {
text-align: right;
}
}
.property-item .title {
margin: 0 0 0.25em !important;
font-size: 1.4em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.property-item .address {
opacity: 0.6;
margin: 0 !important;
font-size: 1.1em;
text-transform: none;
}
.property-item .subtitle {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #999999;
}
.property-item .property-excerpt {
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 15px 15px;
opacity: 0;
line-height: 1.7;
text-align: left;
background-color: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
@media (min-width: 768px) {
.property-item .property-excerpt {
display: block;
}
}
.property-item .property-excerpt span {
font-size: 1.4em;
color: #666666;
text-transform: uppercase;
}
.property-item .property-excerpt::after {
position: absolute;
opacity: 0.5;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #43becc;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.property-item .property-excerpt p {
margin-top: 0.5em;
font-size: 1.1em;
color: #999999;
}
.property-item .property-content {
text-align: center;
background-color: #fff;
}
.property-item .property-content .property-meta {
min-height: 85px;
}
.property-item .property-content .property-meta > div {
width: 50%;
/*
@media(min-width: 1200px) {
width: 25%;
}
*/
}
.property-item .property-price {
overflow: hidden;
padding: 0 15px;
line-height: 50px;
color: #666666;
text-align: left;
border-top: 1px solid #f6f6f6;
}
@media (min-width: 768px) {
.property-item .property-price {
line-height: 60px;
}
}
@media (min-width: 992px) {
.property-item .property-price {
font-size: 1.2em;
}
}
.property-item .property-price span {
font-weight: 300;
}
.property-item .property-price i {
opacity: 0.25;
line-height: inherit;
margin-right: 10px;
display:inline-block !important;
}
.property-item .property-price i:hover {
opacity: 0.75;
cursor: pointer;
color:#aaa !important;
}
.property-item .property-price .property-status {
display: inline-block;
display: none;
float: left;
font-size: 0.8em;
text-transform: uppercase;
}
.property-item .property-price .price-tag {
float: right;
color: #999999;
}
.property-meta {
padding: 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.9em;
line-height: 2;
color: #999999;
text-align: center;
}
@media (min-width: 768px) {
.property-meta {
text-align: left;
}
}
.property-meta a {
color: #999999;
}
.property-meta a:hover {
color: #666666;
}
.property-meta a:hover .meta-data {
cursor: pointer;
}
.property-meta .meta-title {
display: inline-block;
width: 20px;
font-weight: 700;
}
.property-meta > div {
float: left;
}
.property-meta .meta-data {
display: inline-block;
}
.property-meta .meta-data:hover {
cursor: default;
}
.add-to-favorites:hover {
cursor: pointer;
}
#compare-properties-popup {
display: none;
margin: 30px 0;
padding: 30px 0;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
}
#compare-properties-thumbnails ul {
margin-bottom: 0;
}
#compare-properties-thumbnails li {
float: left;
margin-bottom: 30px;
}
#property-comparison-table .comparison-header {
display: inline-block;
width: 20%;
vertical-align: top;
}
#property-comparison-table .comparison-data {
position: relative;
display: inline-block;
width: 39%;
margin-left: 1%;
vertical-align: top;
}
#property-comparison-table .comparison-data a {
color: inherit;
}
#property-comparison-table .comparison-data.columns-3 {
width: 25.66%;
}
#property-comparison-table .comparison-data.columns-4 {
width: 19%;
}
#property-comparison-table .comparison-data .remove-property-from-comparison {
opacity: 0.75;
position: absolute;
top: 0;
right: 0;
height: 25px;
width: 25px;
line-height: 25px;
font-weight: 700;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
#property-comparison-table .comparison-data .remove-property-from-comparison:hover {
opacity: 1;
cursor: pointer;
}
#property-comparison-table .comparison-data .remove-property-from-comparison::before {
content: "";
}
#property-comparison-table .comparison-main .property-title {
margin-bottom: 0;
}
#property-comparison-table .comparison-main .property-address {
font-size: 0.9em;
color: #999999;
}
#property-comparison-table .comparison-attributes {
margin-top: 30px;
}
#property-comparison-table .comparison-attributes .comparison-row {
font-size: 0.9em;
line-height: 2.5;
border-bottom: 1px solid #eeeeee;
}
#property-comparison-table .comparison-attributes .comparison-header {
font-weight: 700;
}
This is a validated CSS-stylesheet. Hope it fixes this error for you:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/**iPad in landscape**/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad in portrait **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 3 & 4 Media Queries
If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries.
Retina iPad in portrait & landscape **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content, #col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12, .header-margin {
margin-top: 300px;
}
}
/** Retina iPad in landscape **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** Retina iPad in portrait **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt, {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content, #col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12, .header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 Media Queries
If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
iPad 1 & 2 in portrait & landscape **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 in landscape **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
/** iPad 1 & 2 in portrait **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
#layerslider_1 {
top: 274px !important;
bottom: 274px !important;
}
.col-sm-12 {
padding-left: 0px;
width: 100%;
}
#searchIt {
position: absolute;
top: 300px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
.property-search-form {
position: absolute;
top: 275px !important;
z-index: 100;
padding-left: 14px;
padding-right: 10px;
margin: auto !important;
clear: both !important;
width: 100% !important;
max-width: 1140px !important;
}
#welcometext {
margin-top: 300px;
}
#main-content,
#col-sm-12 {
margin-top: 300px !important;
text-align: left;
}
.col-sm-12,
.header-margin {
margin-top: 300px;
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments