{"id":11693530,"date":"2019-07-02T16:19:08","date_gmt":"2019-07-02T16:19:08","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/full-width-separator\/"},"modified":"2019-07-02T16:19:08","modified_gmt":"2019-07-02T16:19:08","slug":"full-width-separator","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/full-width-separator\/","title":{"rendered":"full width separator"},"content":{"rendered":"<p>Hi,<\/p>\n<p>back again with a new question:<br \/>\nin the old sites I have been working with I was using the TwentySeventeen default theme, which has an homepage that&#8217;s divided in 4 sections.<br \/>\nBefore each section there&#8217;s the featured image, which I used to fix in its position to have a pseudo parallax effect (no scroll event added, but the fixed position created a good effect).<\/p>\n<p>Now with Astrid theme there are no deafult sections for the Homepage. While I was building my site, I added a &#8220;cover&#8221; block (I am using the IT version and the block is called &#8220;copertina&#8221;, don&#8217;t know if the name is right, image with small text on it) that has fixed position and I was hoping to have that block at 100% width. The block is in the container div, so I think it cannot extend over the container element. To make this happen I used a quick fix with negative margin values and obtained what I wanted.<\/p>\n<p>The code I added in the Custom CSS is this:<\/p>\n<pre><code>.copertinaBio\n{\n\tmargin-left:-50%;\n\twidth:200%;\n\tmax-width:2000px;\n}<\/code><\/pre>\n<p>My question is: is there a better way to write this CSS code to obtain the same effect?<br \/>\nI mean, the 2000px value is totally arbitrary, but I choosed that after many tries, because with this value I can have the text visible and aligned right as I wanted, but don&#8217;t think that&#8217;s the right way to do.<\/p>\n<p>In the same way, I used negative margins for the three pics with caption and link just above the slider. I wanted to have the three pics occupying all the width of the page and used this css:<\/p>\n<pre><code>.wcp-fgg-wrap\n{\n\tmax-width:164%;\n\tmargin-left:-32%!important;\n\tmargin-right:-32%!important;\n}<\/code><\/pre>\n<p>Just like for the other block, I obtained the effect I was looking for, but think there&#8217;s a better way to write this CSS rule. (the 64% percent added to max-width and the 32% margin is equally arbitrary)<\/p>\n<p>Thank you for your attention!<br \/>\nAb<\/p>\n","protected":false},"template":"","class_list":["post-11693530","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/11693530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/11693530\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=11693530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}