{"id":693,"date":"2024-04-26T19:21:56","date_gmt":"2024-04-26T17:21:56","guid":{"rendered":"https:\/?p=693"},"modified":"2024-04-26T19:42:20","modified_gmt":"2024-04-26T17:42:20","slug":"cover-14-vyrivnyuvannya-elementiv-po-sitczi-kontejnera","status":"publish","type":"post","link":"https:\/\/webliumhub.com\/en\/mods\/cover-14-vyrivnyuvannya-elementiv-po-sitczi-kontejnera","title":{"rendered":"Cover 14 \u2014 aligning elements to the container grid"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Cover 14 is a pretty popular Weblium block that lets you upload an image that isn't limited to a 1200px container and touches the very edge of the screen.<br>However, when using Cover 14 in reverse, with text on the left and images on the right, the text extends beyond the 1200px container, which visually spoils the composition.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This small CSS snippet will be useful for aligning text to the left side and fitting it into a 1200px grid. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The code is universal, for any screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\">How to install:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Copy the code and upload it to the HEAD of the site.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">@media (min-width: 1200px) {\n  \/* Default \u2014 \u0422\u0435\u043a\u0441\u0442 \u0441\u043f\u0440\u0430\u0432\u0430 *\/\n  [data-block-name=\"cover-14\"] .w-grid__item {\n    justify-content: left !important;\n  }\n  \/* Revers \u2014 \u0422\u0435\u043a\u0441\u0442 \u0437\u043b\u0456\u0432\u0430 *\/\n  [data-block-name=\"cover-14\"] [class*=\"section--reverse\"] .w-section__inner .w-apply-section-paddings {\n    padding-left: calc(((100vw - var(--w-grid-gap) \/ 2 - var(--w-content-container-size)) \/ 2) + var(--w-content-gutter));\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Cover 14 \u0454 \u0434\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0438\u043c Weblium \u0431\u043b\u043e\u043a\u043e\u043c, \u044f\u043a\u0438\u0439 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f, \u044f\u043a\u0435 \u043d\u0435 \u043e\u0431\u043c\u0435\u0436\u0435\u043d\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0443 1200px \u0442\u0430 \u0442\u043e\u0440\u043a\u0430\u0454\u0442\u044c\u0441\u044f \u0434\u043e \u0441\u0430\u043c\u043e\u0457 \u0433\u0440\u0430\u043d\u0438\u0446\u0456 \u0435\u043a\u0440\u0430\u043d\u0430.\u0410\u043b\u0435 \u043f\u0440\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u0456 Cover 14 \u0443 \u0440\u0435\u0432\u0435\u0440\u0441\u0456, \u043a\u043e\u043b\u0438 \u0442\u0435\u043a\u0441\u0442 \u0437\u043b\u0456\u0432\u0430, \u0430 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0441\u043f\u0440\u0430\u0432\u0430, \u0442\u0435\u043a\u0441\u0442 \u0432\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 1200px, \u0449\u043e \u0432\u0456\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0437\u0432\u0456\u0441\u043d\u043e \u043f\u0441\u0443\u0454 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0456\u044e. \u0426\u0435\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 CSS \u0441\u043d\u0456\u043f\u0435\u0442 \u0431\u0443\u0434\u0435 \u043a\u043e\u0440\u0438\u0441\u043d\u0438\u043c \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0449\u043e\u0431 [&hellip;]<\/p>","protected":false},"author":1,"featured_media":694,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-693","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mods"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/posts\/693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/comments?post=693"}],"version-history":[{"count":2,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/posts\/693\/revisions"}],"predecessor-version":[{"id":698,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/posts\/693\/revisions\/698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/media\/694"}],"wp:attachment":[{"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/media?parent=693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/categories?post=693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webliumhub.com\/en\/wp-json\/wp\/v2\/tags?post=693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}