page is compressed to the center
When I select an item and scroll down, there news items overlapping the main article. I've noticed the main article is not leading from the left side of the screen allowing the news item bar separate access.
All Replies (5)
Dropa said
You need to provide the URL so others can verify what is happening.
Only took seconds to find this https://www.msn.com/en-ca/news/canada/more-than-a-million-bottles-of-children-s-pain-relief-medication-to-arrive-next-week-health-canada-says/ar-AA14hqQC
Headlights said
When I select an item and scroll down, there news items overlapping the main article. I've noticed the main article is not leading from the left side of the screen allowing the news item bar separate access.Perhaps you have zoomed in the page too much for the right part to overlap? as try Ctrl + 0 (zero) to reset. I get the blank space on left also.
using 'msn.ca' and then selecting a news article. once open and scroll down half a page; you get the right side news article menu over-lapping the front page. I've included a jpeg of what it should be and a jpeg of the error. It has nothing to do with 'zooming'
As I make the window narrower or wider, there seems to be a sweet spot where the chat box doesn't overlap the article, but the article changes width as I move the right edge of the window and most of the time the layout just doesn't line up correctly.
This is messy to fix with a style rule override; I just don't know how universally this will work:
/* Un-center MSN article */
@-moz-document url-prefix('https://www.msn.com/en-ca/news'){
/* 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;
}
}
If you want to play with it, here are the steps:
(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 above code block. Stylus should display the importer shown in the first attached screenshot. Click the Overwrite style button to accept the conversion.
(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).
Sorry but doesn't work. Here's more information: When I use 'Edge' and msn.ca and move thru some of the news article and select the 2nd or 3rd one. Scrolling down I find the left news item is properly set to the left side of the page and to the right side a somewhat 'News Bar' exist properly fitting the webpage.
more info: going to NBC News, no such problem exist so my conclusion is it's only happening for msn.ca on Firefox