Shopping at LEGO or Amazon?
Please use our links: LEGO.com Amazon
As an Amazon Associate we earn from qualifying purchases.

Overlays Off Screen

adam_adam_ IrelandMember Posts: 12
When you click on a 'Gear' icon on the home page of the forum, for the icons on the left of the forum above each forum category, once you click on the gear icon the overlay is goes out from the icon to the left so the overlay is over half off screen, and the same happens on the gear icon on the top right of the forum beside where a member's username and avatar are, the overlay displays from the gear icon out to the right and is partly off the screen.

Not sure if you're already aware, couldn't see it reported anywhere.

Comments

  • AstrobricksAstrobricks Minnesota, USMember Posts: 2,501
    I have the same problem with the gear pop up menus. I’m using safari on an iPad.
  • benbacardibenbacardi EnglandMember Posts: 388
    Likewise on Safari on an iPhone.
  • PaperballparkPaperballpark UK / KLMember Posts: 3,469
    Interesting! The same thing happens on my Android phone (Samsung S8+).
  • adam_adam_ IrelandMember Posts: 12
    Ok, only had a chance to properly check it out, it occurs on any lower resolution device, so PC monitors with resolutions like 1024x768, this is due to there being a static width on the forum #Body element of 960px, with left/right padding of 20px and then the rest handled by an auto margin left/right.

    A quick fix (not sure if it'll have any further knock on affects) but it will fix the gear overlay issue on the forum home page anyway. Remove the element in quotes and add the non quoted elements. Will also fix the issue on mobile devices.

    OptionsMenu .Flyout {
    	/* remove 'right: -9px' */
    	left: -9px;
    }
    
    .OptionsMenu .Flyout::before
    , .OptionsMenu .Flyout::after {
    	/* remove 'left: inherit' */
    	/* remove 'right: 14px' */
    	left: 14px;
    	right: inherit;
    }
    
    .MeBox .Flyout {
    	/* remove 'left: 14px' */
    	right: -4px;
    }
    
    .Flyout::before
    , .Flyout::after {
    	/* remove 'left: 9px' */
    	right: 10px;
    }
Sign In or Register to comment.

Shopping at LEGO.com or Amazon?

Please use our links: LEGO.com Amazon

Recent discussions Categories Privacy Policy

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Brickset.com is a participant in the Amazon Services LLC Associates Program, the Amazon.com.ca, Inc. Associates Program and the Amazon EU Associates Programme, which are affiliate advertising programs designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.

As an Amazon Associate we earn from qualifying purchases.