Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 6, 2015 at 8:16 am #531356
    millertimesites

    I have notice that when using Visual Composer for page editing instead of the Avia Editor the Enfold theme as extra space of around 45px between the header and the content.

    As an example here is the website I am working on http://www.bloomingtonelectric.net/
    And here is a test page on the same site using Visual Composer instead http://www.bloomingtonelectric.net/test/

    The reason I want to use the other editor on some pages is that the Visual Composer lets you turn on/off the visibility for each row/column based on the screen with very easily. This lets me create desktop only or mobile only content on the same page very quickly.

    Any idea on how to get rid of the spacing I mentioned?
    Thanks a ton!

    November 6, 2015 at 4:39 pm #531513
    Elliott

    Hi Jon!

    Well it looks like you have some customization going on so it’s hard to tell what it could be from but you can fix it by dragging a codeblock element to the page and add this inside.

    <style type = "text/css">
#main {
    padding-top: 44px !important;
}
</style>

    Cheers!
    Elliott

    November 9, 2015 at 7:42 pm #532852
    millertimesites

    Elliot,

    It worked for Laptop and Dekstop but for Tablets and Phones it still has the gap
    http://www.bloomingtonelectric.net/test/

    Thanks
    Jon

    November 10, 2015 at 2:03 pm #533224
    Rikard

    Hi,

    Try the following in Quick CSS:

    @media only screen and (max-width: 767px) {
.template-page {
padding-top:0px !important;
}
}

    Best regards,
    Rikard

    November 10, 2015 at 8:52 pm #533667
    millertimesites

    Worked like a charm, I had tried a variation but was missing the .template-page part.
    Thanks a ton this make Enfold that much more flexible.

    Any thought to adding functionality to AVIA to let color sections have a visibility checkbox options for Desktop, Tablet, Mobile like Visual Composer?

    November 10, 2015 at 9:11 pm #533678
    Yigit

    Hey!

    Please see – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Cheers!
    Yigit

    November 10, 2015 at 11:00 pm #533733
    millertimesites

    Perfect, works great guys!

    For people not familiar, you go to Appearance > Edit then under functions.php add the code provided above on a new line at the bottom of the file and click save. Unless you are using a Child Theme you may need to add it back in each time the them updates, but it is listed as a note at the bottom of the php file for reference. For menu items make sure to enable the CSS field under screen options at the top of the menu page.

    Also for people with issues, the sample custom CSS script in the link above that goes in Theme Options > General Styling > Quick CSS works for tablet and mobile because of the 990px break point. Adjust this to 767px for purely mobile only or create additional rules with various break points and unique names depending on what you need.

    All my questions on this have been answered.
    Thanks

    November 11, 2015 at 9:34 am #533898
    Rikard

    Hi,

    Great, glad we could help and thanks for sharing your solution, much appreciated :-)

    Cheers!
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.