how to increase max width on desktop
i tried the following with no luck:
@media screen and ( min-width: @width-breakpoint-desktop ) .banner-container, .header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form { margin-right: auto; margin-left: auto; width: 100%; max-width: 70em; }
I finally figured this out. I could not fix this with CSS mods. I edited the skin file responsible which I realise is considered bad practice. If anyone knows how to incorporate what I have posted below into a CSS mod please comment.
The file I changed was in $IP/skins/MinervaNeue/resources/skins.minerva.content.styles/tablet/common.less
At the end of the file is a section that reads:
@media screen and ( min-width: @width-breakpoint-desktop ) {
// stylelint-disable-next-line selector-max-id
.banner-container,
/* FIXME: Generic header class needed me-thinks! */
.header,
.page-header-bar,
.overlay-header,
/* FIXME: Generic content class needed? */
.content,
.overlay-content,
.content-unstyled,
.pre-content,
.post-content,
/* Form only pages e.g. Special:MobileOptions */
#mw-content-text > form {
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: @contentMaxWidthTablet;
}
.header {
// Make sure the main menu and secondary button icon images are$
// with the content.
max-width: @contentMaxWidthTablet + 2 * @iconGutterWidth;
}
Modify the section under #mw-content-text > form
#mw-content-text > form {
margin-left: 5%;
margin-right: 5%;
width: 90%;
max-width: 90%;
}
You can of course enter whatever margins you wish and also a max-width. I tried setting max-width: none; but this caused a horizontal scrollbar with a tiny scrolling area. The value above seem to work fine on many screen sizes.
