Okay
  Public Ticket #2776877
Preview is different to actual view
Closed

Comments

  • karim191 started the conversation
    May 14, 2021 at 2:35pm

    Hi,

    I'm having some issues with layout - when I preview my page it looks as I want it:

    udyZoN.jpg


    However, when I see the page live, the formatting has gone out of the window:
    W0RqQe.jpg


    Could you please advise?

    Thanks

  •  1,878
    Judith replied
    May 14, 2021 at 4:07pm

    Hi Karim,

    Thanks for contacting us.

    Please paste this css in css custom code under Salient > General settings >CSS/Script Related:

    .wpb_column.left_margin_5pct {
        margin-left: 42%!important;
        left: 213px;
        top: -745px;
    }
    .wpb_column.right_margin_5pct {
        margin-right: 8%!important;
    }

    Thanks.

  • karim191 replied
    May 20, 2021 at 8:50pm

    Thanks Judith, 
    Sorry for the delay getting back to you - your response went into my spam folder.

    I've added the code but now the page looks like this:

    FCSiaX.jpg


    and in the front-end editor it looks like this:


    6972881897.png

    Any ideas?


    Thanks again!


  •  1,878
    Judith replied
    May 20, 2021 at 11:29pm

    Hi There,

    Please send in your admin login credentials so that we can look into this further.

    Thanks.

  •   karim191 replied privately
  •  8,847
    Tahir replied
    May 21, 2021 at 6:53pm

    Hey Again,

    Just remove the CSS provided by Judith and its showing up the same on the Live Page and the Front-end Editor.

    Thanks 

    ThemeNectar Support Team 

  • karim191 replied
    May 22, 2021 at 3:06pm

    Hi Tahir,

    Thanks, but I'm still getting the same problem. Looks fine as a draft but when I see the page live this is what I'm getting:

    1807512652.png
  •  8,847
    Tahir replied
    May 24, 2021 at 1:47am

    Hey Again, Hope you had a Positive Weekend, 

    There was margin added on the sides, which was causing the column to shift. Its working now as correctly: https://www.enlighteneducation.co.uk/education/ . Try adding Padding in the Columns instead of margin.

    Thanks

    ThemeNectar Support Team 

  • karim191 replied
    May 25, 2021 at 1:00pm

    That's great, Tahir. Thank you.


    However, the design in the preview is still so different to the live page - why are the flip boxes so much deeper on the live version?
    8645816953.png

    vs

    4179828738.png

    I've had a play around but can't seem to make the desired changes...

    Thanks again in advance for any light you may be able to shed :)
  •  8,847
    Tahir replied
    May 25, 2021 at 5:35pm

    Escalating this to the developer for further response.

    Thanks

    ThemeNectar Support Team 

  •  1,071
    ThemeNectar replied
    May 25, 2021 at 7:30pm

    Hey karim191,

    The front-end page builder wraps all elements in new markup to allow for the controls/drag and drop functionality. Sometimes that causes differences in the real display outside of the page builder. In this instance, the flip box javascript which normally sets the sizing is not making the same calculation. I've added in a snippet of CSS on the page to correct the issuesmile.png