Sunday afternoon trying out things in Pinegrow and created this nice simple layout using Foundation.
@Rob simple but classy and love the photo.
For Safari mobile, whats your preferred choice, include a hack/workaround or simply remove the fixed attachment?
1 Like
@Jack_Clarity here’s the code I’m using and it seems to work for me. In my style.css I add the following:
header {
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
header {
background-attachment: scroll;
}
}
2 Likes
@Rob just a heads up, as I did view the site from my ipad mini (yes I love my ipad!) and the parallax effect doesn’t work on firefox focus, safari or chrome.
@Jack_Clarity that seems to be the trade off when doing it this way, you either the image too large to be viewable and not of much use or you get image displayed completely but it looses the parallax effect 
1 Like
@rob unless I’m losing the plot (it has been known) but the image from my ipad mini doesn’t cover the background and the screen jumps slightly when scrolling the page
1 Like
@rob now it works!
This is similar to my workaround, adjust the layout using media queries, rather than these hacks to force parallax effect.
1 Like
@Jack_Clarity I added the following to the css to allow for iPads so maybe that is the difference
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
header {
background-attachment: scroll;}
}
1 Like
@Rob my bad as i didnt view all of your css (had a lazy glance!) but obviously the media queries have to target all devices and this was the view before you updated the css (something for others to take note of)
This is one reason I now have various testing stations as you need to offer all visitors to your website the same viewing experience.
1 Like
@Jack_Clarity one of the joys of having to accommodate so many devices in the modern world. Thanks for the feedback.
2 Likes
After a lot of nagging from my artist daughter, I picked up an ipad (9.7") and also really like it but am experiencing a lot of difficulty building webpages that respond properly to its screen size. Here is a capture of what I’m trying to do:
What am I doing wrong that I cannot get a ‘proper’ display on my iPad’s Firefox or on Safari but it looks perfect in the Puffin browser? Anyone experience something similar & how did you fix the issue?
Thanks for your offer, @Rob…
The site’s URL is: https://www.statecollegedev.com/rjrwebz/index.php
When building the page in Pinegrow, the iPhone 6 page view shows this:
(This is the look that I expect but does not happen using Apple’s mobile devices running Safari, FIreFox, Opera, or Chrome - just Puffin works.)
So I’m wondering if its possible to fix this issue using CSS, @media queries, -webkit, -moz or some other coding or if I’m doing something incorrectly. (I assume you can open my site via the URL feature in PineGrow?)
Here is my CSS (sorry to hog so much of the page but the download does not allow CSS - only image files):
body {
overflow-x: hidden;
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
div.row.maintop {
margin-top: 100px;
margin-bottom: 220px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
div.row.mainmd {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
@media only screen and (max-width: 1023px) {
body {
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
div.row.maintop {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;
}
div.row.mainmd {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 768px) {
body {
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
div.row.maintop {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 150px;
}
div.row.mainmd {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 220px;
}
}
@media only screen and (max-width: 668px) {
body {
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
div.row.maintop {
margin-top: 0px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
div.row.mainmd {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 375px) {
body {
background-image: url(‘images/macbook-background.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: top left;
background-color: #32383d;
}
div.row.maintop {
margin-top: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
div.row.mainmd {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
}
input[type=text],
input[type=password],
select,
textarea {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
#slideout {
/* position: absolute; */
z-index: 1000;
position: fixed;
top: 100px;
right: 0;
width: 30px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout_tab {
position: relative;
top: 0;
left: -15px;
padding: 20px 0px 0px 0px;
text-align: center;
background: #526369;
color: #fff;
cursor: pointer;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#slideout_inner {
color: white;
position: absolute;
top: -50px;
left: 30px;
background: #526369;
width: 250px;
padding: 15px;
height: 400px;
cursor: auto;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#showblock:checked + #slideout {
right: 250px;
}
#showblock {
display: none;
}
div.row.fixed-bottom {
background-color: #34383c;
margin-top: 16px;
color: #ffffff;
padding-top: 14px;
}
}
}
Hi Randy,
If your interested you could use my self developed cross browser full screen foreground images system: https://yourweblab.nl/full-screen/ (you can test it in any browser or device and see what image is loading).
I implemented Lazy Sizes from Farkas on Github: https://github.com/aFarkas/lazysizes and created a couple of lines CSS magic that you can see when you look in to the page source. It serves every device with the proper pixel ratio image in webp and jpg.
An other example I made in Bootstrap 3: https://www.buitenlust.nu
Bootstrap 4: https://www.wilart.nl
My old website: https://www.allmedialab.nl
The advantage of my system is super fast loading of the website and no unnecessary use of bandwidth!
The disadvantage is that at first it looks like a lot of work.
I created it for Bootstrap but it works on any framework including Foundation.
Unfortunately I have not much time for support.
You can make the resolution as high as you want by adding larger images to the system.
To create the images: https://www.responsivebreakpoints.com/
Regards,
David
2 Likes