Hi.
After reading a lot of posts about jquery.stellar parallax and page builder, and after trying to solve my problem on my own without any result, i’m coming here asking for some help…if possible.
Let’s begin with the fact that i’m a complet noob in development.
So i’m using page builder (which is a super tool by the way) to make my own portfolio website, but i’m confronting a problem with background parallax on pages like this one:
http://christophealonso.com/fr/3d/
The problem is that, even if it works properly on a Landscape HD screen, images seems to display in a weird way when it come to portrait screen like phones and tablet.
It look like pictures are not relatives to there container but to something else that make them almost desapering during slides.
So my questions are:
Is this problem coming from a relative position from a parent? (don’t know how this is working)
Is it possible to restraint images to there containers so they’re not vanishing like they do?
Is it possible to fixe that problem in a way or an other?
Am I doing something wrong?
Anyway, thanks for the future help.
Hi Christophe
Parallax can be problematic on mobile devices. The Page Builder feature definitely needs to do something in that regard. Would you be cool with dropping parallax for mobile? I think that’s the best solution for now. You could by adding the following to Custom CSS:
@media (max-width: 680px) { .so-panel > div[style] { background-position: center center !important; } }hi andrew.
Thanks for the quick help. As a quick solution, yes it’s a cool one thank you again.
I should say, for other readers that might be interested, that in my case i’ve replaced the 680px value with a 1080px value because i might display my portfolio on my “”samsung note”” sometimes for a quick show. So keep in mind that some phones have a higher resolutions.
Anyway thanks again for the quick tip.
As i have some more questions about some other features (each one on the graphic side of the plugins and widget) do i have to post new thread for each one or can we talk about them here?
Those questions are:
***all my questions refer to the kind of pages like this one: http://christophealonso.com/fr/3d/krote/ ***
1) In the button widget, is it possible to display the icon on the other side of a chosen button?
2)I have some pages with raw cuts in 3 parts(which are like 16%, 30%, 54%) but on a tablet view, the 2 first columns are on an equal size and the third one come under the second column (like 50% on first column, 50% on the second and the third one comming under this second column) So is it possible to mantain a lower percentage for this first column on a tablet view?
3) (this is a minor problem for me but…) the image slider widget display a cuted image during what’s look like a loading. Is it possible to fix that? (bottom of each first image are cut on pages launch till the second image comes)
4) (and this one is my main concerned but look complicated) On this same kind of page, the second column contains a text blocs (siteorigin editor) which fit perfectly with the rest of the raw BUT it only last on a 1920px width. When screens have a lower rez (or if you display it on a windowed mode), this column is going lower than the rest of the raw which bothers me a lot!(i’m a composition maniac!^^) is it possible to make it responsive to the rest of the raw somehow? (don’t know how but maybe with a CSS on a pagebuilder layout for this column)
I would thank you for your help once more! great job with all your products especially page builder.
Glad to hear you’ve made progress.
Sure, you can post your questions here.
1. Unfortunately, not at this stage. If you wanted to post this as an enhancement suggestion you could do so here: https://github.com/siteorigin/so-widgets-bundle/issues.
2. Would turning off tablet view work for you? That can be done from SettingsPage BuilderLayoutUse Tablet Layout. That would mean you’d keep desktop layout until the mobile breakpoint which you can set on that same settings page.
3. This is a known bug which I can hotfix. Can you send the affected URLs?
4. Not easily. I can assist with Custom CSS though. Is this the page I should be checking: http://christophealonso.com/fr/3d/krote/.
We’re about to push the latest version of Page Builder. Greg and the team have put in a big effort to improve the live editor, give it a try after upgrading.
OK. Thanks again for the quickest reply ever. really appreciated
1) I’ll do so for every little aspect that i’m gonna found when the website will be done.
2) ok i’ll try the “breakout” trick to display on tablet as on phones
3) I didn’t have all the urls that are going to need this hotfix right now. Can i send you those URLs when i’m done?
4) Yes if we can begin with this url (and i’ll be able to duplicate the css on other pages that need it) it could be great.
here are the url’s that could need that for now (and have different length of text, the first one even have a button widget beneath it):
http://christophealonso.com/fr/3d/krote/
http://christophealonso.com/fr/3d/humanoide/
http://christophealonso.com/fr/3d/virus/
And i’m gonna have a look at the next page builder version.
Sorry to message back again but i’ve just done the update to page builder 2.4 as suggested and there are 2 annoying things going on:
1) siteorigin editor widget can’t be closed (with “the cross” or “done” button)
2) every puffing and margin value are not displayed when you come back to any widget or raw editions…
So i can’t really work on my layout like that…
Is it possible to come back to the previews version till it’s fixed?
Thanks
Hi Christophe
Sure, for anything we need to view to help with you can send the URL’s once live and we’ll take a look.
With regards to the Page Builder issues, they haven been resolved. Please, go to Dashboard > Updates and run the Page Builder update if one is available. If you’re on the latest version, 2.4.2 and still seeing the problem, please, clear your browser’s cache. This seems to be the final step required by some users experiencing this issue.
Hey Christophe
I’m not quite sure the best way to proceed to best assist you with point 4 above. Can I perhaps login and try a few things? I’ll create a duplicate page to do a few quick experiments on. If you’re ok with that, then, please, find instructions below.
Thanks :)
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
Thanks again andrew,
I’m creation a account for you right away so you’ll be able to test whatever you want.
Sorry for taking so much time but i’ve lose all mysql data base, so i had to do a bit of work before coming back to you you.
This is a private message.
This is a private message.
Thanks :)
It’s a really straightforward solution so I’m going to suggest it first. Check this page now:
http://www.christophealonso.com/fr/3d/krote/
I’ve increased SettingsPage BuilderLayoutMobile Width to 1200. This means that we go from your vertically aligned layout straight to mobile without the bit in between that isn’t lined up. Let me know your thoughts.
Hi andrew.
well, it could have done the trick but i also have a portrait tablet layout and it doesn’t fill on it. (and i want to keep it as it is a portfolio that i might show personally)
But the idea of keeping the PC layout no so responsive could be a way!
Could we think about some code for the text widget field (and, like on this page, text and button but we can include it on a layout builder widget) to react with the high of the first column (which will be a video or a slider).
Let say for exemple, center the text/widget depending on the first column widget high.
if we’re able to do so, we could just change de row background layer to match the color of the text field, so it looks like a scaled/responsive top/bottom margin.
I know it’s a bit tricky and i really don’t know if it’s possible to make a widget react depending on an other widget value.
The other way i’m thinking out,to achieve pretty much the same result could be to use the page resolution.
Like, let say, for “this X” resolution, top and bottom margin of the widget is value “A”
for “this Y” resolution, top and bottom margin of the widget is value “B”
for “this Z” resolution, top and bottom margin of the widget is value “C”
What do you think about that?
Does it looks possible to you?
Just to inform you about my tablet layout i’ve done it with a css on the style css and it looks like that:
/*rowtemplate1 is a row class*/
@media all and (min-width : 768px) and (max-width : 991px) and (orientation:portrait){
.rowtemplate1 .panel-grid-cell:nth-child(1) {
float: left !important;
width: 40% !important;
}
.rowtemplate1 .panel-grid-cell:nth-child(2) {
float: left !important;
width: 60% !important;
}
.rowtemplate1 .panel-grid-cell:nth-child(3) {
float: left !important;
width: 100% !important;
}
}
To ensure we’re on the same page I’ve screenshotted the problem below after returning the mobile breakpoint to 768.
At this point, I don’t know how we could keep the columns the same length. The text is sticking out because it needs that much to display at that font size. Next to the text, the video and image can’t be as long as the text because they have to maintain their proportions.
Ok, so assuming I’m understanding the challenge correctly, let me take a look at the CSS you posted above.
Cool, the CSS you posted is taking effect. Hopefully, I’m not misunderstanding your replies. Are you happy with that solution on tablet?
Hehehe ok point by point.
About the screenshot: I know that the text field is going lower than the rest of the page but that’s not a main concern for me as i can put less text or even having a stretched layout (as I do before sql base disapear) so let’s assume that the text field is always smaller than the video and slider column (tomorrow i’m gonna work it to be the same length in a 769 px wild so we are always in a situation were text is smaller than the two others columns)
Now concerning the tablet layout i’vé done it is just a test.The two fists columns are at this ratio for now but if we need them to be different it can be. No problem for me (40%/60% right now but it can be 45%/55%…everything that’s going to fit properly,i’m good with it).
Am I clearer right now with my lasts thaughts?
;)
Ok, little update.
I’ve put the break point between PC and phone display to 1080 (so the video column is displayed properly and don’t have a right margin on that phone rez) and then i’ve worked the text and button layout so it fit properly on that rez. Now we need to find how to play with the text top margin and the button bottom margin (i mean in a visual way,it don’t have to be the margin itself)
Does my request looks clear now? i know it can be difficult to understand what people have in mind, even more when the are graphist who knows nothing about programing (what can be done or not)
by the way, just a little thanks, once more, because i’m still impress by how responsive you are on a volunteer base! So thanks andrew for your precious help!
Me again.
I just wold share some little thoughts with you just to know what can be done. Tell me if i’m right or wrong in my way of thinking.
Right now i think you’ve understand that my main concern is to fill the gap in this row in an esthetic way. It could be with top bottom margin as it can be with police size, line height…whatever.
My first though was to put the widget in a center position relative to the column height beside BUT i’m pretty sure that it’s almost impossible as the height value of those columns (or widget) are really relative.
SO i think THE MAIN QUESTION here will be: On what knowing value can we work? a columns height? a widget height? The height of the screen resolution? (that’s what i think could work because it’s kind of fixed) i don’t know (and what kind of value it is: pixels? percentage?)
I think that knowing this “parent” value will help a lot in knowing what we can do. Knowing so, we will be able to think about the code easily and do something like: widget top/bottom margin = x% of the “parent” value
or: text police size or line height = x% of the “parent” value
What do you think about that? ON WHICH VALUE DO YOU THINK WE CAN RELY ON?
Thanks for the wait. Unless you’re using tables which we aren’t using in this case, auto height in CSS is very challenging. We can’t know the parent value without using JavaScript, it isn’t possible in CSS. As you mentioned, yes, the screen resolution is always known and it is a value we can target.
You could perhaps set a min-height for the text area:
If you like that idea and want to center the text we could look into ways of doing that. The min-height rule would make things look like this:
Does that help at all? Sorry this isn’t going faster.
(Just for interest sake, this is one of the better posts out there on CSS centering. It might help if you feel like checking out how it works etc: https://css-tricks.com/centering-in-the-unknown/)
Hello again Andrew. I don’t really get the idea behind the minimum height solution but what I see on the picture you’ve sent doesn’t suits me. It look like a padding solution between the text and the button (which I won’t have on every pages) and not a “centering” solution for both. I’m gonna have a look at the post link you’ve sent.
You talking a lot about CSS restrictions but i’M not against the idea to use js or php to solve that main last problem.
Unfortunately, using JS to detect the height of elements and make adjustments would be custom development task, beyond the scope of what we can assist with here on the forums. We certainly do our best to help with small snippets where we can though. We’ve chatted about CSS a bit because it’s an easily accessible language to make changes to the page and the page/s rely on it quite heavily.
To ensure that I’ve answered your questions I’ll briefly go back to them. There isn’t any easy way to measure the height of elements using existing Page Builder functionality or CSS. Unfortunately, this request puts us in a custom development situation.
Ideally, what you need is some kind of equal column height solution. I’d love to have something like this built into Page Builder and will certainly suggest it to our developers.
It looks like this has been a plugin developed for this: https://wordpress.org/plugins/equal-height-columns/. I haven’t tested it though so I don’t know that it would work with our Page Builder plugin.