Tagged: , ,

Viewing 30 posts - 1 through 30 (of 41 total)
  • Author
    Posts
  • #798501

    Hey guys,

    I was given this CSS to remove the “Related tags” text that appears at the bottom of Masonry Portfolio galleries…

    .single portfolio .blog-tags, .single-portfolio .page-thumb, .single-portfolio .jp-relatedposts {
    display: none !important;
    }

    It works, but now when I scroll down a page that includes the masonry gallery element, there’s a slight page jump. I’ve tested all my custom CSS and found that the problem goes away if I don’t use the CSS above.

    So in short, I want to still remove the related tags, but not have the website jump. I think it’s a modification in the CSS above, or a new one entirely.

    Screenshot of what im referring to:
    https://ibb.co/eHc6iF

    Website:

    Password in private content

    Thanks!

    #798637

    Hey ccyran,

    I am looking at the page you linked but can’t see the jump you are speaking of. Can you screenshot the problem area from the exact page you posted?
    Best regards,
    Jordan Shannon

    #798687

    Hey Jordan,

    It’s happening in the link I posted above and in any portfolio item. It happens right as you’re scrolling past the text box, while the masonry portfolio gallery fades in.

    Thank you,
    Chris

    #798999

    Hi,

    Again, I am not seeing that in the link you posted above. I don’t see a text box on that page at all.

    Best regards,
    Jordan Shannon

    #799017

    Hey,

    You don’t see the text box on this page?

    The text that says

    “Zach Wilson
    Cover art and creative direction for Zach Wilson’s debut album: “Fall of a man, Rise of a King”. Shot by David Hartz. More info + visuals coming soon.

    Concept | Art Direction | Photography ”

    Or on this page?

    “R/GA Stories
    Dedicated to the Naik family. In memory of one of my best friends, Ravi Naik. More info & imagery coming soon.

    Art Direction | Editorial | Design”

    As soon as you begin to scroll past the page, it does a bit of a hiccup. Like the entirely jumped down 30 pixels. It’s not a smooth scroll.

    #799026

    Hi,

    Okay, I see the issue now. Honestly, this can be any number of issues and I would guess it is not related to css, but rather the loading of JavaScript.

    Best regards,
    Jordan Shannon

    #799028

    Hey,

    I actually think it’s related to the CSS.

    When I got this CSS (below) to remove the related tags at the bottom of masonry portfolio, this jump happens.

    .single portfolio .blog-tags, .single-portfolio .page-thumb, .single-portfolio .jp-relatedposts {
    display: none !important;
    }

    Is there no way around this? A different CSS perhaps? It really bothers me that this happens on my pages. It doesn’t look good :(

    #799035

    In masonry gallery, it says I can apply a unique style via CSS. maybe that can solve it?

    #799299

    Hi,

    If you remove the css that was put in it removes the issue correct? Please do that and I we can try a different approach.

    Best regards,
    Jordan Shannon

    #799324

    Hey Jordan,

    I removed it. The issue is gone, but the “related” text on the bottom is back.

    Thank you,
    Chris

    #799650

    Hi,

    Okay, we can see if an alternative method can both hide that area and prevent the skip. If you could please provide admin info it would be much appreciated.

    Best regards,
    Jordan Shannon

    #799687

    Okay great!

    Admin info in private content area…

    • This reply was modified 7 years, 6 months ago by ccyran.
    #799913

    Hi,

    It seems like you are using JetPack’s feature to display related posts because once I deactivated it, it removed the related items. Please check the settings within JetPack and see if you can disable this feature.

    Best regards,
    Jordan Shannon

    #799933

    Hey Jordan,

    Im confused. Did you deactivate it?

    I stil see the page jumps. Like on this page for example:

    And I deactivated jetpack entirely and its still happening. Can you fix this?

    Thank you,
    Chris

    • This reply was modified 7 years, 6 months ago by ccyran.
    #799967

    Hey Jordan,

    I found a solve but I think it’s only temporary. I would still like a solution to this.

    What I’ve done in the meantime…

    It only happens to pages that have a text box right above the masonry gallery. I placed a 100×100 clear box (.png file) inside the grid row and beneath the text box, and this issue doesn’t happen anymore. Im not sure why it fixed it that way, but it did.

    Sorry I spoke too soon :/. I just looked at my site on a bigger screen (Macbook 15″) and the issue is still happening.

    Thank you,
    Chris

    • This reply was modified 7 years, 6 months ago by ccyran.
    #800287

    Hi,

    I added in a color section between the text and the gallery. Please test and see if the issue still occurs. It fixed it on my 15″ screen.

    Best regards,
    Jordan Shannon

    #800303

    Hey Jordan,

    That seemed to fix it! But is there any way to do 1 of these 2 two things?

    1. Reduce the gap now between the text box and masonry gallery.
    2. Hide a color section on mobile, since it doesn’t happen there.

    Thanks!

    #800311

    Hi,

    Right now the color section at that exact height prevents the jump on desktop so it may be best to keep that as is for now. It can be hidden on mobile by adding the following to quick css:

    @media only screen and (max-width: 767px)  {
    #av_section_1{
    display:none!important;
    }
    }

    Best regards,
    Jordan Shannon

    #800315

    Ah okay got it!

    And adding this CSS will remove the color sections on any page right? Since I’ll be using this method wherever the page jumps.

    #800316

    Hi,

    Yes. As long as there are no additional color sections on that page. In that case just give it a unique class or id, and apply the css to that.

    Best regards,
    Jordan Shannon

    #800318

    Awesome,

    I’m not show have to give it a unique class or id haha, but I don’t think I’ll end up using color sections anyway.

    Also! I just used this CSS but it seemed to remove the text on the homepage of my website. Any thoughts?

    • This reply was modified 7 years, 6 months ago by ccyran.
    #800322

    Hi,

    The css I gave you? If so that means you need to add a custom class to the color section I added. Please see the following:

    Best regards,
    Jordan Shannon

    #800350

    Yes

    And I see. So what if I give every color section on different pages the same name? It’ll apply to all right?
    So I’ll only need one custom CSS. And last thing!

    Could you give me an example of how to implement this? If I used “pagejump” as the custom CSS class.
    I’m a bit unsure how to add that into the css you gave me.

    Thanks!

    #800362

    Hi,

    Yes “pagejump” would be the id of the color section.

    You would then add this to quick css:

    @media only screen and (max-width: 767px)  {
    .pagejump{
    display:none!important;
    }
    }

    Best regards,
    Jordan Shannon

    #800416

    ah I see!

    Dude thank you so much for all your help. I really appreciate everything.

    Have a good weekend!
    Chris

    #800422

    Hi,

    I’m glad I can help. You have a great weekend as well!

    Best regards,
    Jordan Shannon

    #800603

    Hey Jordan,

    Sorry to bug you, I’m looking at a different page in Safari, and it’s still happening. Even with the color section. Can you check this out?

    (Color section was removed here after trying it)

    Thank you,
    Chris

    • This reply was modified 7 years, 6 months ago by ccyran.
    #800944

    Hi,

    I’m sorry but I can’t reproduce the “jump” issue. Could you please provide a short screencast or screenshot?

    Best regards,
    Ismael

    #801636

    Hey Ismael,

    Can you take a look again on any page?

    It looks like it’s happening everywhere now. Im looking through Safari first, then Google Chrome.

    • This reply was modified 7 years, 5 months ago by ccyran.
    #801650

    And as an update!

    Screencast: https://vimeo.com/219557271

    It happens right before the masonry gallery element appears.

    Notes:
    Here’s what i’ve tried so far to fix this, but to no avail. Nothing works so far. Please help :(

    – Disabling all CSS
    – Removing related tags in “Jetpack settings”
    – Removing other elements on the page (separators, the image, text boxes, etc)
    – Disabling every plugin I have.

Viewing 30 posts - 1 through 30 (of 41 total)
  • You must be logged in to reply to this topic.