Layout in edit mode looks different to layout on site preview

I want to build a navigation area similar to https://egghead.io/
I defined new region on the very top of my website, placed image in the left corner, menu in the middle, the only css rules I created are to manage the menu colors, and they are shown in the screen shot.
When I view it in edit mode it looks somewhat okay, but when I preview it on the site the layout is completely off. You can see it on the screenshot at the red frame, there is a margin-top of 71.5 px added to my image wrapper element. Also <div class="upfront-output-module default c11" id="module-1422430251821-1124"> which is menu wrapper have ridiculous margins added on top and left.
Please advice how this can be fixed. I have the latest versions of Upfront and Fixer.
Thank you in advance

  • Bojan Radonic

    Hey @Olga,

    I've fixed the issue with the image by using one of the theme options for that element to remove theme padding from there, and have also slightly increased menu container width in upfront editor so it fits in one line.

    I've also added CSS code to increase the width of the header region and move the image and navigation to the right so it looks more as the one in the link you posted. Please note that you will not be able to see this when using upfront editor but only on the front end of the site.

    This is the code I've added to global CSS rules:

    #upfront-region-container-navigation .upfront-grid-layout {
        width: 100%;
    }
    
    div#image-1446530865662-1496 {
        width: 280px;
    }
    
    .upfront #wrapper-1446532701815-1944 {
        max-width: 290px;
    }

    Hope this helps :slight_smile:

    Cheers,
    Bojan

  • Olga

    I appreciate a lot amazing support from wpmudev, however I would like to avoid this kind of fine tuning in the future, so I would like to understand the framework better.

    Why the CSS rules that are added have to be "global"? (if I understand correctly you define them somewhere completely outside of my site and they got injected with the admin-ajax.php)

    Since fixer is a child theme of upfront, I can't create another child theme to fixer where I would be able to organize my CSS. How do you ensure that CSS rules I add in editor are save over upfront/fixer updates? is there a designated place where all these rules are kept?

    I went through the 7 part course about using upfront, but still there is a lot to learn. If there are other articles that can help me answer the questions please point me to the right links.

    Thanks again for the incredible support

  • Bojan Radonic

    Hey again @Olga,

    Regarding CSS, all upfront customizations, layout and CSS are saved in the database and it is going to be used only on that specific site or subsite in case you're using mutlisite. With this being said you don't have to worry about updates removing your customizations.

    The reason I suggested CSS is that by default upfront doesn't have full width regions as an option, and as it has IDs for each of the regions we an easily target them with CSS to make any modifications we want.

    I went through the 7 part course about using upfront, but still there is a lot to learn. If there are other articles that can help me answer the questions please point me to the right links.

    At the moment this is what we have from Upfront manuals. We're actively trying to improve and add more so you can expect more in the future :slight_smile:

    Hope this helps :slight_smile:

    Cheers,
    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.