Menu has invisible padding around it on export and publish

Hi,

I am just re-creating a site that I originally had in Joomla CMS and have it nearly perfect apart from two very annoying instances that have me baffled.

Here is the site in the designer…

https://preview.webflow.com/preview/tracy-wood-products?preview=fc66a1562be1df85d24850e48a75a577

and published so you can see the issues…

  1. The menu items, for some reason have a small (2px maybe) invisible padding around them to the left and right. This is not in the designer but appears on publish and export.

  2. On the online store page, Ecwid is superseding my heading tags (H2 & H3) and inserting it’s own font and colour. Any clue as to how I can permanently stop this from happening without having to manually amend the code with an !important; rule every time I export? EDIT: SOLVED BY ALTERING THE ECWID GLOBAL CSS.


Here is my public share link: LINK
(how to access public share link)

  1. A screenshot will help. One without padding and with padding. because I don’t see any problem here.

  2. This is the CSS that cause the problem.

    html#ecwid_html body#ecwid_body h1, 
    html#ecwid_html body#ecwid_body h2, 
    html#ecwid_html body#ecwid_body h3, 
    html#ecwid_html body#ecwid_body h4, 
    html#ecwid_html body#ecwid_body h5, 
    html#ecwid_html body#ecwid_body h6 {
            color: #2583AD;
            font-family: open sans;
        }

If you can’t remove the above code (which may be appended by the script) the easy way is to add one class to the h2 h3 and increase its weight.

Hey, thanks for your help,

Here’s the screenshot of the menu padding issue, how it looks in the designer and how it looks when published…

I have solved the extra padding issue on the menu…

Interestingly, when you disable the ‘Beautify HTML (Show non-minified HTML on published website)’ on the Hosting admin panel it rectifies this problem.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.