Ads are obscuring article content
Until recently the articles on MSN.com were left justified with ads present to the right of the article. However, now the articles are centered instead of left justified. This is causing the ads to the right to obscure the right portion of the article's content and thus rendering it unreadable.
Has anyone else come across this, or know what might be done to fix it. I have enabled ad-blockers and also tested with the ad-blockers off. This did not solve the problem
Any help would be appreciated.
Thanks!
Toutes les réponses (1)
Hi, another user mentioned this, too. The site only seems to lay out correctly at certain widths/resolutions. I don't know whether MSN is working on fixing this or whether we need to use "self help" to make the page more readable.
The "self help" option is to inject new style rules into the page to override the centering. I haven't tested this with a lot of articles, so I don't know how universally this will work. If you want to try it:
(1) Install the Stylus extension from the Add-ons site.
(2) Click its toolbar button to open its drop-down menu, then click Manage to open its dashboard view.
(3) In the left column, click the "Write new style" button.
(4) Click in the code editor box on the right and paste the following code block. Stylus should display the importer shown in the first attached screenshot. Click the Overwrite style button to accept the conversion.
@-moz-document url-prefix('https://www.msn.com/'){
/*** msn.com - Un-center article ***/
/* Override margin-left:auto which causes centering */
[class*="viewsHeaderContainer"] > div,
div[role="main"] > section {
margin-left: 54px !important;
}
/* Slide the action buttons into the new left margin */
[class*="articlePage_actionTrayContainer"] {
margin-left: 40px !important;
}
}
(5) In the left column, enter a name for your style and click the Save button (second attached screenshot).
(6) When you return to the page, the headline and article should be shifted left (third attached screenshot shows "Before" and "After").
