SPPB Misalignment Of Top Row Modules - Question | JoomShaper

SPPB Misalignment Of Top Row Modules

SC

Sean Carney

SP Page Builder 1 year ago

I believe that the problem I am reporting is an issue with SP Page Builder and not an issue with the Gazette template. Although anything is possible. I am using SP Page Builder 3.8.9 and Gazette template 2.0.1

The problem is occuring on our home page at https://test1.theraliv.org/

The problem we are having is that every time a person loads our home page the top row from the page builder does not load properly aligned. The top row is divided into two colums. I have duplicated this top row three times. The modules displayed are identical. There is no padding or margins in any of the rows, columns or addons.

The first row does not align properly. The second and third rows align properly.

The first row will align properly after resizing the browser window.

At first the column on the right is displaying the modul images lower than the column on the left. But, upon resizing the browser window the modules jump into the correct position. If you reload the home page again the modules go out of alignment again. Resizing the browser window makes them line up properly again.

If you disable the top row, then the second row which is idential will start behaving wrong just like the top row was originally.

If you then also disable the second row, then the third row which is also identical also misaligns on page loading.

Modules misaligned on page load https://drive.google.com/open?id=175giRGgCQltTZO_6wlJ_ydGoyh9Hd3z0&authuser=1&usp=drive_link

Modules realign after resizing the browser window https://drive.google.com/open?id=1NO09cNcH9tNdudP2stcB0gkilVpbK29-&authuser=1&usp=drive_link

I also discovered in a fourth row that I created, the same type of problem. This time the right side is higher, instead of lower than the left side. https://drive.google.com/open?id=1bgyAJyAQo1-W60vs0ALMmX_6nl5NJpro&authuser=1&usp=drive_link

Anyhow, after writing all of this, I realize that the problem may be caused by the RAXO modules and not by the SP Page Builder. I would like to know what you think!

However, I am thinking that maybe SP Page Builder could be building evenly divided columns?

I did notice that the widths of the div left and right columns are not equal. Could this be causing this issue: <div class+sppb-col-md-6 id="column-wrap-id-1673454455612"> Left dimensions are 660x524 <div class+sppb-col-md-6 id="column-wrap-id-1673454455614"> Right dimensions are 630x433

Could this be the cause of this?

Thanks again for all that you do to help our websites be great again. :-)

Sean

0
11 Answers
‏‏‎ ‎J‏‏‎‎e‏‎‏‏‎‎n‏‏‎‎s W.‏‏‎
‏‏‎ ‎J‏‏‎‎e‏‎‏‏‎‎n‏‏‎‎s W.‏‏‎
Accepted Answer
1 year ago #102602

Hello Sean Carney,

I am very sorry you had to wait for 1 Week and still have no help received by joomshaper support staff.

I have checked your site and found a problem.
It is your extension raxo.

raxo calculates a height of 934px, which is too large

after resizing the window, raxo recalculates the size and it looks fine

You could try delaying the initialisation of Raxo.
I can't think of anything else at the moment.

0
SC
Sean Carney
Accepted Answer
1 year ago #100977

It ends up that this problem is not just about the top rows alignment. It is about a LOT of the settings in the Page Builder that are being disregarded as the page loads. But, if a person grabs the edge of the web browser and makes it a tiny bit wider, immediately all the settings in the Page Builder that were disregarded take effect. Then the module spacings and module alignment are instantly corrected. I am hoping this might be a helpful clue as to what is going on.

0
SC
Sean Carney
Accepted Answer
1 year ago #101149

I removed the top rows from the initial report of these bugs because I am running out of time. But, our page, which is almost ready to launch still has the problem where upon page loading the SP Page Builder settings like margins and padding are disregarded on this homepage. In order to get the page to look right a user has to drag their web browser to slightly increase or decrease the width of the page. Our team is asking me to abandon SP Page Builder for this page but I want to give you a chance to help us to know what is wrong.

Here is an image showing the page when it is first loaded:

https://drive.google.com/file/d/1L2vVJo_2H64xPNz-eqO8DpwHG1zldrWu/view?usp=share_link

Here is an image showing how the page corrects itself if a person grabs the edge of the browser window and slightly resizes the width of the page:

https://drive.google.com/file/d/1c2SOR2o32oakigHG97hZTfC-3nZY5ZSj/view?usp=share_link

Interestingly enough, this problem is pretty much happening on all of my pages created with the page builder. The initial load of the pages is not respecting/following the settings for margins and padding set in the Page Builder Addon's. But with a little quick resizing of the browser, those settings take effect.

0
SC
Sean Carney
Accepted Answer
1 year ago #102271

Is there no answer for this problem being caused by the Page Builder?

0
SC
Sean Carney
Accepted Answer
1 year ago #102557

Here is a screencast you can download from our Google Drive: https://drive.google.com/file/d/1ExbB5KYVeJre93um0It4cJHcglA9OsRx/view?usp=share_link

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #102717

Hi there,

Thanks for contacting us. Sorry for the inconvenience. I have checked your issue via my macbook 14 inch & no issue found. But, This type of issue is happening for the third party module causes.

-Thanks

0
SC
Sean Carney
Accepted Answer
1 year ago #102787

Thanks Toufiq,

I know you are correct thanks to Jens. Once again SP Page Builder is NOT the cause of my problem. :-)

Sean

PS. Can you please look at https://www.joomshaper.com/forum/question/21317 and check out the page in question with your Mac using a Safari browser?

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #103232

@Sean Carney Should i check your another forum post?

0
SC
Sean Carney
Accepted Answer
1 year ago #103336

@Toufiq,

No need to check the other ticket. Somebody took care of it last night by adding some code to the custom.css file. I suspect that code addition will be added into your templates in the future.

0
SC
Sean Carney
Accepted Answer
1 year ago #103337

BTW, Even though this ticket is closed I wanted to add some followup here in case anybody else runs into the same problem. The folks at Raxo.org showed me that the problem is caused by the plugin JSLazyLoader. I am going to contact the developer of JSLazyLoader and let him know. Apparently it is caused by a 1px by 1px image file that is used for resizing. They stated that the problem is that our images are not square but rectangular. They have provided me a few code snippets that we could add to fix this and I will use them but first I am going to let the JSLazyLoading developer know in case he would like to solve this in some other way.

The good news is the problem was NOT caused by JoomShaper's template. It was also NOT caused by the RAXO modules.

Sean

1
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #103497

Thanks for your explanation.

0