Pagefly bug? - Way to adjust column before page fully loads? Off by 15px

[Brian-A]

I added two rows and 3 columns in each row. Trying to have two columns on one line on mobile view. For some reason on pagefly when I’m modifying the 2 columns one column glitches out by 15px. I need to either extend it or retract it by 15px.

left column:

right column:

the issue is on mobile device, when the page loads, the square is off by 15px then loads in when the page fully loads. Is there a way I can add the CSS to the code before the page loads? base.css? I added it to theme.liquid before /body but it still loads slow.

what user sees upon entering website:

what user sees when page fully loads:

I want the user to see everything fully loaded upon viewing the page.

I haven’t had this issue before when trying to modify columns on pagefly.

I’m trying to do something like this:

[Small_Task_Help]

Hi,

Hope this will help

• Add CSS inside PageFly to control column width before the page loads.
  CSS code example

.your-column-class {
    min-width: calc(50% - 7.5px); /* Adjusting the 15px issue */
}

• Use JavaScript to hide content until fully loaded.

Code example

• Adjust spacing manually inside PageFly Mobile View.
• Set a fixed height to prevent weird shifts.
• Clear cache and test in all device