How to make gallery on full wide of the page

Hi All, I use Envira Gallery Pro with Sydney Pro and try to have gallery of the full width of the page and all the time have only a block in the middle of the page. Do you know what shall I do, what to change. Thanks in advance

Hello there,

Please provide us a link to that page, so we can take a look directly.

Regards,
Kharis
aThemes Support

Hello Kharis,
Link to the page is: http://smolar.com.pl
Regards
Jacek

Hello Jacek,

Your homepage is only containing main slide and social profules icons. Would you please provide me specific page’s URL?

Regards,
Kharis
aThemes Support

Hello Kharis,
all other subpages are with galleries as for example: http://smolar.com.pl/new-zealand/ or http://smolar.com.pl/mauritius/

Regards
Jacek

Hello Jacek,

It seems likely you’re using editor block. You would use extra container block and put your gallery inside it. Try Stackable plugin which offers container block with some great features.

Regards,
Kharis
aThemes Support

Hello Kharis,

I tried with container block (also Stackable plug-in) and on the “building area” I see gallery on the full width but later on normal page area for gallery is limited. I do something wrong. It looks like I put container in to other block or container, which have limited width, but I can’t find other possibilities.

regards

Jacek

Hello Jacek,

Ensure you’ve enabled Full Width option. Then do these 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  = $('.wp-block-group.alignfull');

        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 );
  1. Update

Regards,
Kharis
aThemes Support

Hi Kharis,

many thanks, but this also doesn’t work. It seems, that something is blocking the active area to this box in the middle. Its same situation in every case. Its doesn’t mater, if I put there gallery, or use any other element like video, or text box, etc. The space is limited. Its something at the beginning of the structure and I don’t see any possibility to change any parameter in general settings or page builder settings. Nothing works, but its really funny, because when I create page I see full width and later on its disappear and everything on limited area. See attached screenshots

Hello there,

It looks like we should dive deeper regarding this. Perhaps we should change the default theme’s container width to adjust with Gutenberg blocks’ width setting. I will pass this to our development team to see the possibilities.

Regards,
Kharis
aThemes Support