- This topic has 27 replies, 2 voices, and was last updated 5 years, 5 months ago by David.
-
AuthorPosts
-
October 17, 2018 at 9:19 pm #703766Steig
Hello,
I’m trying to rebuild a front page to a non-responsive RoR website using wordpress and Generate Press. You can see that the Parallax effect is really different in how the text blocks and the image blocks scroll between the two sites. Is there something I can be doing different in GP to make it look/behave more like the original? I used the sections option to piece all the sections together.Thanks
October 18, 2018 at 7:06 am #704057DavidStaffCustomer SupportHi there,
can you provide links to the two sites?
October 18, 2018 at 7:11 am #704066SteigI’ve just sent the info through your pre-sales form.
October 18, 2018 at 7:38 am #704101DavidStaffCustomer SupportThanks, so those are fixed backgrounds. To do this with Sections you need to remove the parallax option and try adding a CSS Class to the section of
fixed-background
and adding this CSS:.fixed-background { background-attachment: fixed; }
October 18, 2018 at 7:48 am #704111SteigDoing that causes all the sections to just scroll like it’s all one webpage. i.e. no effect at all.
October 18, 2018 at 7:54 am #704235DavidStaffCustomer SupportIn the Sections > Settings tab there is a field for Custom Classes, you need to add the
fixed-background
classs thereOctober 18, 2018 at 12:46 pm #704520SteigThat definitely makes it look the same during scroll. Is there a way I can apply a mask to the images? I used the exact same format, but do see they original site shows them cropped more narrowly. Can some sort of mask do this?
October 18, 2018 at 12:57 pm #704531DavidStaffCustomer SupportYou can try this instead to position the images centrally:
.fixed-background { background-attachment: fixed; background-position: 50% 50%; }
The old site also uses a
height: 955px;
property instead of the padding that you have set in the sections. I personally prefer padding then using a set height, but if you want you can add that to the above CSS and zero the padding in the section.October 18, 2018 at 9:22 pm #704738SteigMy problem is that with the images the way they are, the first text bar falls below the fold and so a viewer would have to be interested enough to scroll to see what the picture is about.
So I need to reduce their viewable size. I changed the code to include the “background-position: 50% 50%;” statement and couldn’t see any impact on the pages.
So changed it to “background-size: 955px;” and that causes a tiled effect. The picture is shown 3 times across and has 2 rows.
For the first image only, I took out the padding and doing so causes that picture to disappear completely. Putting the padding back at 60%/10% causes it to show up again. You can check it out. Right now the first picture has no padding and doesn’t show. but the other pictures still have padding and do show, albeit they are tiled as noted above.
So it would appear that I do need the padding to make the pictures show. I need to loose the tiling effect and somehow shrink them down.
October 19, 2018 at 3:25 am #704888DavidStaffCustomer SupportOk, what i meant was this CSS – which is what the old site uses:
.fixed-background { background-attachment: fixed; background-position: 50% 50%; height: 955px; }
Then you can remove the Padding from the section.
October 19, 2018 at 6:17 am #705018SteigSomething I perhaps should have asked first, does the
.fixed-background
command break the responsive aspect? I just tried that aspect of things after this last change and it is broken. Desktop looks great. iPhone looks bad. So went backwards through the changes above until now I’m at the first code suggestion and the pictures still don’t shrink down on the phone. How can I accomplish this and keep it responsive?October 19, 2018 at 6:48 am #705039DavidStaffCustomer SupportYes, so as mobile doesn’t support fixed backgrounds we can wrap the CSS in a media query like this:
@media (min-width: 769px) { .fixed-background { background-attachment: fixed; background-position: 50% 50%; } }
October 19, 2018 at 1:08 pm #705384SteigI’m noticing on an iPad in landscape mode, the pictures go back to the fixed background mode and they are too big to look good. Would I just make the 769px number larger to force it out of background mode? Or is there a more elegant method? Some of these tablets have pretty high resolution screens.
October 19, 2018 at 1:18 pm #705390DavidStaffCustomer SupportYou can try increasing to 1024px.
October 20, 2018 at 6:19 am #705775SteigI had to go clear to 2048px! These things have amazing resolutions. (https://www.lifewire.com/what-is-ipads-screen-resolution-ips-display-1994325)
But I’m concerned this will impact laptops or even some peoples desktops. Is there any other way to identify if its a table to display properly for it?
-
AuthorPosts
- You must be logged in to reply to this topic.