{"id":130,"date":"2021-11-27T19:23:43","date_gmt":"2021-11-27T19:23:43","guid":{"rendered":"https:\/\/writingagame.com\/?p=130"},"modified":"2021-11-28T03:54:12","modified_gmt":"2021-11-28T03:54:12","slug":"fix-2-posts-formatting","status":"publish","type":"post","link":"https:\/\/writingagame.com\/index.php\/2021\/11\/27\/fix-2-posts-formatting\/","title":{"rendered":"WordPress fix 2. Posts formatting"},"content":{"rendered":"\n<p>My template, Nirmala, is full-screen, which is perfect for the front page. But posts themselves are full-screen too, which seems little TOO wide, don\u2019t fit well into range of vision:<\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/writingagame.com\/img\/b02\/c02\/01.jpg\"><\/p>\n\n\n\n<p>Would be logical to assume that we need to add another custom CSS, something like<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.single-post {\nmax-width: 800;\n}\n<\/pre><\/div>\n\n\n<p>But no, it doesn\u2019t work. Well\u2026 looks like WordPress isn\u2019t much easier than Cross-platform 3D\u2026 At least for me\u2026<\/p>\n\n\n\n<p><strong>Professional advice from Artem Demin:<\/strong><br> We can set width limit for ALL pages EXCEPT home. <\/p>\n\n\n\n<p>By default, the post will be aligned to the left. If we want to place it in the center (we do), then we should specify margins. <\/p>\n\n\n\n<p>Go to <em>Dashboard -&gt; Appearance -&gt; Customize -&gt; Additional CSS<\/em><\/p>\n\n\n\n<p>and add<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.site-main {\nmax-width: 700px;\nmargin-left: auto;\nmargin-right: auto;\n}\n.home .site-main {\nmax-width: 100%;\n}\n\n<\/pre><\/div>\n\n\n<p>Then &#8211; <strong>Publish<\/strong>.<\/p>\n\n\n\n<p>Now:<\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/writingagame.com\/img\/b02\/c02\/02.jpg\"><\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>2. <strong>Main page columns size<\/strong><br>Main (home) page in my template was splitted in 3 columns (max for widest resolution). The columns, accordingly, were pretty wide. 5 columns would look more reasonable. I suspected that number of columns or max column width \u2013 just another parameters in CSS. Again, I was wrong.<\/p>\n\n\n\n<p><strong>Professional advice from Artem Demin:<\/strong><br>We are dealing here with adaptive design, which activates different layouts depending on screen width. So, we need 5 different layouts, a separate layout for each number of columns. Each layout must specify when it should be activated (in which screen widths range). So, the code will be:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* columns N *\/\n@media (min-width: 300px) and (max-width: 600px) {\n.card-columns {\n-moz-column-count: 1;\ncolumn-count: 1; }\n}\n@media (min-width: 600px) and (max-width: 900px) {\n.card-columns {\n-moz-column-count: 2;\ncolumn-count: 2; }\n}\n@media (min-width: 900px) and (max-width: 1200px) {\n.card-columns {\n-moz-column-count: 3;\ncolumn-count: 3; }\n}\n@media (min-width: 1200px) and (max-width: 1500px) {\n.card-columns {\n-moz-column-count: 4;\ncolumn-count: 4; }\n}\n@media (min-width: 1500px) {\n.card-columns {\n-moz-column-count: 5;\ncolumn-count: 5; }\n}\n<\/pre><\/div>\n\n\n<p>Add this code <em>to Dashboard -&gt; Appearance -&gt; Customize -&gt; Additional CSS<\/em><\/p>\n\n\n\n<p><strong>Publish<\/strong><\/p>\n\n\n\n<p><strong>Before:<\/strong><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/writingagame.com\/img\/b02\/c02\/03.jpg\"><\/p>\n\n\n\n<p><strong>After:<\/strong><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/writingagame.com\/img\/b02\/c02\/04.jpg\"><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If you are using right side bar, you can limit it&#8217;s width by:<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/*right side-bar*\/\n@media (min-width: 1600px) {\n\t.col-xxl-2.widget-area {\n\t\tmax-width: 250px; \n\t\tfont-size: small;\n  \t\tborder-left: 3px solid orange;\n\t} \n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>3. <strong>Delimiters (separators) between posts<\/strong><\/p>\n\n\n\n<p>To make borders between sections more notable, I also added:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/*delimiters*\/\nhr {\n  border-top: 3px solid orange;\n}\nhr.wp-block-separator {\n  border-top: 3px solid orange;\n}\n.card {\n\tborder-bottom: 3px solid orange;\n}\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li><em>hr.wp-block-separator<\/em> &#8211; it&#8217;s <strong>hr<\/strong> inside posts.<\/li><li><em>.card<\/em> &#8211; is a post announcement on a home page.<\/li><\/ul>\n\n\n\n<p><strong>Now:<\/strong><\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/writingagame.com\/img\/b02\/c02\/05.jpg\"><\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">My template, Nirmala, is full-screen, which is perfect for the front page. But posts themselves are full-screen too, which seems little TOO wide, don\u2019t fit well into range of vision: Would be logical to assume that we need to add another custom CSS, something like But no, it doesn\u2019t work. Well\u2026 looks like WordPress isn\u2019t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-130","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/comments?post=130"}],"version-history":[{"count":14,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/130\/revisions"}],"predecessor-version":[{"id":294,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/130\/revisions\/294"}],"wp:attachment":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/media?parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/categories?post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/tags?post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}