From some reason in the customize page I put an element


From some reason in the customize page I put an element at the side of the page (bottom picture) but when I save and check the "real site" there is a big margin between the side of the page and the element (upper picture)...
How can I make sure the elements are on the side, the place I want them to be?


  • Adam Czajczyk

    Hello Roy,

    I hope you're well today and thank you for your question!

    Could you please provide me with some additional information on this? It would be really helpful if you could tell me:

    - what theme are you using?
    - how do you put these elements on a page (e.g. via HTML+CSS or any "visual page builder")?
    - what's an URL of page in question so I could take a look?

    Looking forward for your replay,

  • Roy Cohen

    I'm using Luke and Sara upfront with your visual page builder. I can't send you an URL because for now I work with localhost and dont have live server yet. but you can see from the attached picture that in the lower picture (the real time mode) the blue line isn't 100% wide, and the map isn't close to the left edge of the page, and in the upper pic, the line is full and the map is on the left side...

  • Adam Czajczyk

    Hello Ray,

    Thank you for you replay!

    The theme you're using isn't a "100% screen width" theme. Our "Look and Sara" is maximum 1080 pixels wide (except top header region that by default features a "screen wide" video). Therefore all the "full width" content will used no more than aforementioned width and entire container will be centered on the screen.

    The difference between the look in "upfront editor" and front-page is because Upfront's panel occupies around 260px wide column on the screen and in case of some resolutions this may look like what you're designing is "full screen" wide.

    Another questions - I can only see 6 themes (upfront), is that all you offer?

    At this moment there are indeed 6 Upfront based themes available but our designers and developers are working on more, including a "blank" one and a cool "Upfront theme builder" that will let you "visually" built your own Upfront theme from scratch. I'm not able to give you any ETA on this but I can assure you that there's many great new features coming soon.

    I'm looking for animation plugins or any plugin that will bring some movement to my site (grows on hover etc.). Do you have any idea?

    Effects such as "grow on hover" can be easily achieved with pure CSS. As for "animation" plugins, there's many slider and similar tools available around. If you could please provide me with more information on what exactly would you like to achieve, I'm sure I could give you some suggestions. It would be great though if you could start new threads for questions not strictly related to the initial issue. This way we'll be able to respond faster and more accurate!

    Best regards,

  • Predrag Dubajic

    Hi Roy,

    Currently you can only place elements in the content holder which is 1080px as Adam mentioned above.

    There's a CSS "hack" to increase content holder width for specific element, you would need to find ID make it full width with this CSS:

    #upfront-region-container-SECTIONID .upfront-grid-layout {
    width: 100%;

    Below is screenshot with instructions on adding global CSS in upfront.

    Best regards,

  • Predrag Dubajic

    Hi Roy,

    When you add new region the name you use will be added in that section ID, and that's what you would want to use.
    For example, if you create region named mySection the ID will be #upfront-region-container-mySection

    For existing regions you can use Chrome inspector tool to find the ID of that element, I have attached a screenshot as an example of where to look, in my example I used my-custom-region as section name.

    Hope this helps :slight_smile:

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.