The problem of mobile page adaptation（ there is a lot of white space at both ends of the mobile page）

loveXMTX commented 4 years ago

Issue Checklist

[x] I am using the latest version of NexT.
[x] I have read the relevant documents of Hexo and NexT.
[x] I have reviewed the latest Roadmap on GitHub and searched for current issues, which does not help me.

Expected behavior

I want the whole page to be full of screens on the mobile side, instead of leaving a lot of blank space on both sides

Actual behavior

I modified the document according to the official document如何更改内容区域的宽度？

Edit source/css/_variables/custom.styl, and modify parameters with percentage and px

// 修改成你期望的宽度
$content-desktop = 100%

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 100%

But there is a lot of white space at both ends of the mobile page，so how can I solve this problem？

My Blog

Links to demo site with this issue: N/A
Links to repository or source code of the blog: https://gitee.com/loveXMTX/loveXMTX

Steps to reproduce the behavior

N/A
N/A
N/A

Environment Information

Node.js and NPM Information

v14.5.0
6.14.5

Package dependencies Information

   │                                                                │
   │      New patch version of npm available! 6.14.5 → 6.14.8       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.8   │
   │               Run npm install -g npm to update!                │
   │

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Welcome To Byp's Blog
subtitle: '面朝大海，春暖花开'
description: Linux、代码、公考、行测、申论
keywords: 生活，思考，数码，电影，代码，公考
author: Bie Yongpan
email: bieyp6@foxmail.com
language: zh-Hans
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://blog.lovexmtx.icu
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  # order_by: -date
  order_by: -updated #修改为以文章更新时间排序
# Category & Tag
#default_category: uncategorized
default_category: 
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD HH:mm:ss
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Search
search:
  path: search.xml   #在public目录的根目录下生成search.xml 文件，用于存储网站文章的文字数据.
  field: post
  format: html
  limit: 10000

# RSS
feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit: 140
    content_limit_delim: ' '
    order_by: -date

NexT Configuration

# Schemes
scheme: Muse

Other Information

welcome[bot] commented 4 years ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

issue-label-bot[bot] commented 4 years ago

Issue Label Bot is not confident enough to auto-label this issue. See dashboard for more details.

jiangtj commented 4 years ago

I see that you seem to have customized .main-inner

loveXMTX commented 4 years ago

I see that you seem to have customized .main-inner

Oh，thanks！I think I know how to solve it.

But I also have a question, how to make the background image adapt to the mobile phone? In other words, can I customize the background image of mobile terminal? Make it different from the desktop resolution or picture

theme-next / hexo-theme-next