Title: full width separator
Last modified: July 2, 2019

---

# full width separator

 *  [andreaborin](https://wordpress.org/support/users/andreaborin/)
 * (@andreaborin)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/full-width-separator/)
 * Hi,
 * back again with a new question:
    in the old sites I have been working with I 
   was using the TwentySeventeen default theme, which has an homepage that’s divided
   in 4 sections. Before each section there’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).
 * Now with Astrid theme there are no deafult sections for the Homepage. While I
   was building my site, I added a “cover” block (I am using the IT version and 
   the block is called “copertina”, don’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.
 * The code I added in the Custom CSS is this:
 *     ```
       .copertinaBio
       {
       	margin-left:-50%;
       	width:200%;
       	max-width:2000px;
       }
       ```
   
 * My question is: is there a better way to write this CSS code to obtain the same
   effect?
    I 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’t think that’s the right way to do.
 * 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:
 *     ```
       .wcp-fgg-wrap
       {
       	max-width:164%;
       	margin-left:-32%!important;
       	margin-right:-32%!important;
       }
       ```
   
 * Just like for the other block, I obtained the effect I was looking for, but think
   there’s a better way to write this CSS rule. (the 64% percent added to max-width
   and the 32% margin is equally arbitrary)
 * Thank you for your attention!
    Ab
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffull-width-separator%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/full-width-separator/#post-11694442)
 * Hello there,
 * Try doing the below steps:
 * 1. Install and activate the [TC Custom JavaScript](https://wordpress.org/plugins/tc-custom-javascript/)
   plugin
    2. Go To **Appearance** > **Custom JavaScript** 3. Paste the following
   code into the provided box
 *     ```
       (function( $ ) {
       	'use strict';
   
         var forceFullBlock = function () {
   
           var fullContainer = $('body');
           var elemSelector  = $('.copertinaBio, .wcp-fgg-wrap');
   
           if( elemSelector.length ) {
   
             elemSelector.each( function () {
   
               var type       = $(this).data('block-type');
               var leftSpace  = $(this).offset().left - fullContainer.offset().left;
               var rightSpace = fullContainer.outerWidth() - leftSpace - $(this).parent().outerWidth();
   
               $(this).css( {
         				'margin-left': - leftSpace,
         				'margin-right': - rightSpace,
         				'padding-left': type === 'expand-content' ? 0 : leftSpace,
         				'padding-right': type === 'expand-content' ? 0 : rightSpace
         			});
   
             });
   
           }
   
         }
   
         forceFullBlock();
         $( window ).on( 'resize', forceFullBlock() );
         forceFullBlock();
   
       })( jQuery );
       ```
   
 * 4. Update
 * Flush cache before reloading your site. Otherwise, new code addition won’t take
   an immediate effect.
 * > [I Make Changes and Nothing Happens](https://wordpress.org/support/article/i-make-changes-and-nothing-happens/)
 * Regards,
    Kharis
 *  Thread Starter [andreaborin](https://wordpress.org/support/users/andreaborin/)
 * (@andreaborin)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/full-width-separator/#post-11704360)
 * Hi Kharis Sulistiyono and thank you for your answer.
    I followed your steps, 
   but the result isn’t what I expected. With the provided jQuery code, the 3 initial
   pics don’t occupy the full width, and so is for the next pic, which occupies 
   60% of the page, right aligned.
 * Here’s a screen fo the issue:
    [https://gyazo.com/9c40125bcb6c0da4397b1680ffad523f](https://gyazo.com/9c40125bcb6c0da4397b1680ffad523f)
 * I’m cutting off the js code, because with the only CSS worked better.
 * Thank you anyway, if you want to try with another code, I’ll be glad to test 
   it.
 * Bye!
    Ab

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘full width separator’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/astrid/1.20/screenshot.png)
 * Astrid
 * [Support Threads](https://wordpress.org/support/theme/astrid/)
 * [Active Topics](https://wordpress.org/support/theme/astrid/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/astrid/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/astrid/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [andreaborin](https://wordpress.org/support/users/andreaborin/)
 * Last activity: [6 years, 11 months ago](https://wordpress.org/support/topic/full-width-separator/#post-11704360)
 * Status: not resolved