Essential Grid - Item Padding Visibility

[cynth]

Hello! Have been trying to sort out this issue with no luck, and wondered if you could give me a hand. I have an essential grid for posts and am trying to edit the skin. I would like for the item to have outside padding, and have done so in the settings. However, the padding will only show when I hover over the item in the grid (otherwise it just shows the featured image of the post).

My site is still local at the moment so I have taken the screenshots as below to show the issue first. The left side image is the grid when displayed, the right image is what happens on hover and what I would like to see permanently on the grid. I have already turned all animations on the grid to ‘none’.

Thanks for your help in advance!

[Prasant]

Hello Cynth,

Thanks for writing in!

Please take a look at following tutorial and scroll down to whole grid padding section to add padding to the grid:

https://www.themepunch.com/essgrid-doc/item-spacing-grid-padding/

Let us know how it goes.

Thanks.

[cynth]

Hi Prasant, thanks for your info. However, I have already added padding to the grid and also to the individual items via the Skin Editor.

The problem is the padding added to my items (in the skin editor) do not appear unless I hover over the item in the grid (as per the screenshot above). I need the individual item paddings from the skin to show originally in the grid even if I don’t hover.

Please advise how I can set the grid so that it shows my individual item padding as added in the skin?

[friech]

Hi Cynth,

In that case, please upload your site on a staging server and provide us login credentials in a secure note, so we can take a closer look.

Thanks,

[cynth]

Hi there,

Thank you for your help - I managed to resolve the original issue, managed to find some random info somewhere which said that masonry layout was required for it to work.

However, have a few more problems that I’ve been working days on and can’t seem to figure out:

1. Scroll-Top Anchor - how to make it appear only on the homepage and not on any other pages?
2. Portfolio page (Gallery) - the filter is not working, no response at all for either the hide/show icon or the category selections.
3. Portfolio page (Gallery) - his there is a way to specify the x.main colour for the portfolio page only? I would like to change the background colour for the main section where the portfolio items & filter are.
4. Soliloquy - the navigation buttons for the slider on the homepage (Gallery section) will float up and down on mobile and won’t scale.
5. For some reason on mobile view, an empty bar appears above the navigation menu even though I have disabled the top bar.

Thank you as always.

[ruenel]

Hello Cynth,

Thanks for updating in!

1.) To hide the scroll to top anchor in other pages and display it only in your homepage, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

body:not(.home) .x-scroll-top {
  display: none;
}

2.) This issue occurred because of this custom JS script added in theme options.

jQuery(document).ready(function ($){
$('a[href*="#"]').off( "click touchstart");
             $('a[href*="#"]').on('touchend click', function(e) {
                href        = $(this).attr('href');
                notComments = href.indexOf('#comments') === -1;
                if ( href !== '#' && notComments ) {
                  var theId = href.split('#').pop();
                  var $el   = $('#' + theId);
                  if ( $el.length > 0 ) {
                    e.preventDefault();
                    
                   
                    $('html, body').animate({
                                scrollTop:   $($el).offset().top -58
                            }, 450);
                      return false;      
                  }
                }
              });

        });

I have temporarily removed the code and the filter buttons in your Gallery now works.

3.) To change the background color of the main content in your gallery, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-template-template-layout-portfolio .x-main{
    background-color: #eee;
}

4.) In smaller screens, I am seeing this:

How should the arrows behave or will be positioned in smaller screens?

5.) This is because you have added this css code in homepage’s Cornerstone custom css:

@media(max-width:979px){
    body{
        padding-top:60px !important;
    }
}

Hope this helps.

[cynth]

Thanks @RueNel.

1.) Custom JS - this script was added as suggested somewhere else on the forum to fix the anchors jumping to the wrong place on the homepage. After removal of the script, now the anchor links jump incorrectly and not to the top of the section. Is there any other script/css I could add which would fix this issue and also not cause the portfolio filter to stop working?

2.) Sililoquy slideshow - When the page is viewed on mobile, the navigation arrows will float up and down as I scroll, here’s a screenshot of what happens when I scroll up the page:

If I scroll down, the arrows will appear below the image. The movement is not limited to the section, the arrows can move as far as to the top and bottom of my mobile screen.

Aside from this issue, is there any way that I can make the arrows stay in the same position instead of repositioning according to the width of the images? Ideally I would like for them to stay further out on the rightmost/leftmost sides of the blue board.

Thanks again for all your help, appreciate the speedy support.

[rad]

Hi Cynth,

1. In that case, please change that CSS to this

jQuery(document).ready(function ($){
$('a[href*="#"]:not([class="x-portfolio-filter"])').off( "click touchstart");
             $('a[href*="#"]:not([class="x-portfolio-filter"])').on('touchend click', function(e) {
                href        = $(this).attr('href');
                notComments = href.indexOf('#comments') === -1;
                if ( href !== '#' && notComments ) {
                  var theId = href.split('#').pop();
                  var $el   = $('#' + theId);
                  if ( $el.length > 0 ) {
                    e.preventDefault();
                    
                   
                    $('html, body').animate({
                                scrollTop:   $($el).offset().top -58
                            }, 450);
                      return false;      
                  }
                }
              });

        });

2. I can’t seem to reproduce it on my end, the arrows stay on its position as I viewed and scroll the page. And it’s only limited to the settings provided in the Soliloquy plugin. But arrows are responsive on my end, hence it doesn’t need repositioning. May I know which browser you’re testing it with and what device?

Thanks!

[cynth]

Hi Rad,

1. Unfortunately the JS does not work - it fixes the scrolling on the homepage anchors, but then the portfolio filter is broken again. Any other suggestions?

2. I am using Safari on iOS, iPhone XS.

Thank you!

[ruenel]

Hey @newbasecynth,

Please update the JS and use this:

jQuery(document).ready(function ($){
$('a[href*="#"]:not(.x-portfolio-filter)').off( "click touchstart");
             $('a[href*="#"]:not(.x-portfolio-filter)').on('touchend click', function(e) {
                href        = $(this).attr('href');
                notComments = href.indexOf('#comments') === -1;
                if ( href !== '#' && notComments ) {
                  var theId = href.split('#').pop();
                  var $el   = $('#' + theId);
                  if ( $el.length > 0 ) {
                    e.preventDefault();
                    
                   
                    $('html, body').animate({
                                scrollTop:   $($el).offset().top -58
                            }, 450);
                      return false;      
                  }
                }
              });

        });

We would love to know if this has worked for you. Thank you.

[cynth]

Hello!

1. Thanks @RueNel but this JS also doesn’t work - the filters of the categories can be selected, but the show/hide button does not work. When selected to hide, half the button disappears but the filter menu list remains. Same issue for the JS suggested by Rad previously. Left the code in so you can see here.

2. The Soliloquy issue remains, I am using Safari on iOS, iPhone XS to test, info as requested by @Rad

Thanks again.

[rad]

Hi @newbasecynth,

1. The code that Ruenel and I provided works, and the portfolio filter works as I checked on your site and it’s your gallery page where year are the filters.

2. I checked and able to reproduce it, it appears to be plugin limitation as the responsive positioning of the arrows are triggered based on slide or transition time. Hence, the more it has delayed the more it’s noticeable especially when scrolling. And since it’s a plugin we don’t develop then I can’t offer any workaround as I’m not familiar with their implementation. All we could do is forward the issue to the plugin developer, though, it’s not too noticeable on my end, just when it’s slow. Have you tried another gallery plugin instead? Like revolution slider, it should be responsive and its slide navigation works well.

Thanks!

[cynth]

Hi Rad, thanks for checking. I’m checking the site now and the filter really doesn’t work The years sorting works, but the + icon to show/hide the menu does not work at all and I have tried Chrome/Firefox/Safari. Page is now at this link if you need to check, as I’m testing other solutions in case we can’t get this to work.

For the slider issue, that’s ok, thanks for checking anyway - let me see if I can find another way.

[friech]

Hi Cynth,

As we can see that custom JS code is conflicting with the portfolio filter navigation, please add your custom JS code on the Page that only needs it so it does not affect the other pages. You can add the code on Page > JS instead (not on Theme Options > JS).

Thanks,

[cynth]

Thank you, this was able to solve the issue.

One more question about the portfolios - I have used the following code to try and make 2 columns on mobile view for my portfolio post gallery (iPhone XS), but it does not work. Could you please advise if there is some other code I could try?

@media (max-width: 767px){
    .page-template-template-layout-portfolio-php .x-iso-container[class*="cols-"]>.hentry {
        width: 49.95%;
    }
}

Thanks!

[friech]

Hi Cynth,

Please update your custom CSS code to this:

@media (max-width: 767px) {
	.x-iso-container.cols-4>.hentry {
		width: 49.95%;
	}
}

Please add it on Theme Options > CSS

If you have further question, we kindly ask to write it on a new thread as this one is getting longer and hard to follow.

Cheers!

[cynth]

Ok, thank you very much for all your help!

[nabeel]

Glad we could help.

Cheers!