DEV Community

qiudaozhang
qiudaozhang

Posted on • Edited on

4 3

dev调整页面宽度

背景

dev这个网站默认的内容宽度太窄小了,个人不习惯,用stylus写个简单的css,让他内容变宽,那么大空白浪费,看个代码还拖动才能看完,很不舒服

.crayons-article,#bottom-content-read-next{
    width:1600px!important;
    margin-left:-400px;
}

.crayons-article-actions__inner{
    left: 100px!important;
    position:fixed!important;
}
.crayons-layout__sidebar-right {
    right: 100px!important;
    position:fixed!important;
}
Enter fullscreen mode Exit fullscreen mode

效果如下

效果

同理,它的编辑界面的宽度也是太窄了,我们加个css

.crayons-article-form__content{
    width: 1600px!important;    
    margin-left:-400px;
}
Enter fullscreen mode Exit fullscreen mode

一下就舒服了

如果还想隐藏右边的无关紧要的内容

.crayons-article-form__aside {
    display: none;
}
.sidebar-wrapper-right {
    display: none;
}

.crayons-layout__sidebar-right {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

完整css

.crayons-article,
#bottom-content-read-next {
    width: 1000px!important;
    margin-left: -200px;
}

.crayons-article-actions__inner {
    left: 100px!important;
    position: fixed!important;
}
.crayons-layout__sidebar-right {
    right: 100px!important;
    position: fixed!important;
}

.crayons-article-form__content {
    width: 1400px!important;
    margin-left: -200px;
}

.crayons-article-form__aside {
    display: none;
}
.sidebar-wrapper-right {
    display: none;
}

.crayons-layout__sidebar-right ,.crayons-sponsorship-widget{
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay