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 to see the link]

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

  • Hello there,

    Try doing the below steps:

    1. Install and activate the 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

    Regards,
    Kharis

    Thread Starter andreaborin

    (@andreaborin)

    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

    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.