Ad

Unwanted Margin Of Not Set In CSS/HTML

- 1 answer

Testing my Shopify store's responsiveness and found that at certain width some additional margin appears right-hand side of the entire document, but I can't find out why, 'cuz there's nothing at all related to margin/padding neither in CSS nor HTML itself.

I tried to supress scrollbars using overflow-x: hidden on body and html but it doesn't really help 'cuz on touch devices it's still possibele to scroll.

So far, I tested the issue on Chrome v61.0.3163.100(Official Build)(64-bit) and Mozilla Firefox v47.0.1 in Developer Mode. It appears on width 832px and 832px correspondingly.

Also, tried to spy on how CSS's @media, @query-at stuff gets picked up in Chrome Dev Tools but still have no clue what causes this bloody inset.

Here's a screenshot of the issue.

enter image description here

Thanks for helping.

Ad

Answer

Update left: 0 to right: 0 for the dropdown in the More item

#moreMenu .site-nav--dropdown {
    right: 0;
}

Left 0 sets the menu item starting on the left side of containing parent and the with of it is longer than the parent length so it creates that extra space.

Ad
source: stackoverflow.com
Ad