• Hi,

    Currently the width of the post is only about 1/3 of the screen width. How can I increase it?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Moderator jordesign

    (@jordesign)

    Hi @chcw – the main column for content in the theme is deliberately set to a width which allows for the best ease-of-reading. It is possible to change that kind of thing with CSS – but I’d warn against it unless you have specific reasons you would like it wider.

    If you’d really like to try and have it wider – could you please share the URL of the site so I can take a closer look?

    Thread Starter chcw

    (@chcw)

    Hi, @jordesign

    Thank you. You can see it at https://www.chcw.blog/. The actual post column is only about 1/4 of the screen width.

    Moderator jordesign

    (@jordesign)

    Thanks @chcw – that’s very helpful.

    Part of the reason the column is so narrow is because of the Sidebar on the right taking up width.

    But in either case – you can try using this CSS to make that whole area wider.

    @media screen and (min-width: 48em){
    .wrap {
        max-width: 1280px;
    }
    }

    You can add that CSS in the Customizer (Appearance > Customize) under that ‘Additional CSS’ section.

    Thread Starter chcw

    (@chcw)

    Hi,

    Thank you.

    Another strange thing is that in the editor(I use classic editor). The text is auto-wrap at the middle of the editor and cannot go beyond that. See below:

    https://pasteboard.co/poUo0iBf6o5N.png

    Also how to change the font size?

    • This reply was modified 8 months, 1 week ago by chcw.
    Kavya Gokul

    (@properlypurple)

    Hey @chcw! In the classic editor, the theme can add css code using add_editor_style function, which is what is happening here. To change this, you can install a plugin to add code snippets to your site, and add some css to change the width in editor:

    add_filter('tiny_mce_before_init','wpdocs_theme_editor_dynamic_styles');
    function wpdocs_theme_editor_dynamic_styles( $mceInit ) {
    	$styles = 'body{max-width:700px}';
    	if ( isset( $mceInit['content_style'] ) ) {
    		$mceInit['content_style'] .= ' ' . $styles . ' ';
    	} else {
    		$mceInit['content_style'] = $styles . ' ';
    	}
    	return $mceInit;
    }

    Thread Starter chcw

    (@chcw)

    Hi, @Kavya Gokul

    Thank you. Then how to increase the font size?

    Moderator jordesign

    (@jordesign)

    Hi @chcw – just to clarify, are you wanting the main text (paragraphs) to be larger in the site for visitors and in the editor as well?

    Thread Starter chcw

    (@chcw)

    @jordesign

    Increase the font size in paragraphs for visitors.

    It seems the font size in editor is normal.

    Also will the theme decrease the image quality in mobile phone? I check my blog in mobile phone and find the images are blurred. It seems that the theme or some other plugins replace the original ones with a lower quality images. I check Imagify and I have selected “Lossless optimization” alrady.

    • This reply was modified 8 months, 1 week ago by chcw.
    Moderator jordesign

    (@jordesign)

    Hi @chw – some CSS like this would help with the font size – you can update the value to a size you would like.

    p {
        font-size: 1.25em;
    }

    Also will the theme decrease the image quality in mobile phone? I check my blog in mobile phone and find the images are blurred. It seems that the theme or some other plugins replace the original ones with a lower quality images. I check Imagify and I have selected “Lossless optimization” alrady.

    One thing I can think of is if the images you loaded were of very high file sizes/dimensions? Sometimes browser scaling them down to fit can result in lower quality.

    Thread Starter chcw

    (@chcw)

    @jordesign

    Thank you very much. Now the font size is OK.

    How to reduce the left/right margin of the post?

    As for the image, I use WP Import/Export to migrate images from another site to the current one. The original version of the image is also not large, scuh as this one: https://www.chcw.blog/wp-content/uploads/2024/02/cat3.jpg, and the post use a smaller dimension https://www.chcw.blog/wp-content/uploads/2024/02/cat3-300×225.jpg. The image looks OK in desktop, but becomes blurred in mobile phone. Very strange.

    Thread Starter chcw

    (@chcw)

    Also is there a Chinese version of the theme?

    Moderator jordesign

    (@jordesign)

    Hey @chcw,

    How to reduce the left/right margin of the post?

    This is something that would be controlled by the CSS we used to change the width of the main column earlier in this thread.

    You can change that ‘max-width’ value to be larger and the margins either side will decrease.

    Also is there a Chinese version of the theme?

    Default themes for WordPress (like this one) should be translated automatically – if you go to ‘Settings’ in your admin menu and change your language, the site should update.

    As for the image, I use WP Import/Export to migrate images from another site to the current one. The original version of the image is also not large, scuh as this one:?https://www.chcw.blog/wp-content/uploads/2024/02/cat3.jpg, and the post use a smaller dimension?https://www.chcw.blog/wp-content/uploads/2024/02/cat3-300×225.jpg. The image looks OK in desktop, but becomes blurred in mobile phone. Very strange.

    That does seem very strange – it seems it may have had something to do with the migration. If you re-upload that specific image as a test – does it behave differently?

    Thread Starter chcw

    (@chcw)

    That does seem very strange – it seems it may have had something to do with the migration. If you re-upload that specific image as a test – does it behave differently?

    I will try to do so . Thank you so much!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to increase the width of the post?’ is closed to new replies.