Pattern shifts content off web browser

  • I use a few patterns on my site’s home page to provide a nice look and feel. One is the “People” Pattern under the “About” category, and the other is the “Two images, text, and buttons” under the “Featured” category. I use the “Publication” site theme.

    These worked well on both mobile and web browser until recently. Now, when viewing from a browser on a laptop, the pattern is shifted to the left so far it is completely off the screen, even when zooming out.

    Has anyone run into these issue? Is there a known solution or workaround? Would it be simpler to build my own custom layout rather than using Patterns?

    The blog I need help with is: (visible only to logged in users)

  • Hey there, if they were working before and just stopped, there may be a bug, or perhaps something else going on with your theme.

    Can you try this?

    – Make two test pages, Test-two-images-pattern and test-people-pattern

    – Insert one pattern on each test

    – Don’t modify the patterns to replace text, etc.

    – Do privately publish, then report back here so we can take a look.

    If the pages work fine, I’m wondering if one of your patterns became corrupted somehow. We can dig into it more when we know more, though.

  • Thanks for the quick response! I tried your suggestion here – I left the generic content in the Patterns. It appears to have the same issue: https://dannymercuriohikesthewhites.wordpress.com/testing-wordpress-patterns/

    Do you think there might be a bug?

  • Thanks for that. Looking at your theme, the last update was almost two months ago, so there wasn’t a recent change in the theme that would explain it.

    I went into your homepage and enabled the list view – this is useful when using blocks to create your layouts.

    What I discovered is that the first column group was not grouped anywhere and seemed to exist outside of the page layout area.

    I clicked the three-dot menu of the column and created a group out of it and it appears to have fixed the layout issue for those blocks:

    To fix the remainder of the pages, you’ll need to move those other groups to nest under the group I created in that screenshot above. You should be able to click and drag the other groups to nest under the first block of columns as shown here:

    That should fix it. Going forward you would just need to add your new blocks under that first Group section and the layout should behave like you want.

    Let us know if you still have trouble!

  • Thanks for the advice. I moved the other three groups under the first group in the hierarchy, however the home page seems to be still having the same issue.

    I don’t see what’s different between the configuration of the first group and the other three. Any ideas why it’s still displaying incorrectly?

  • Hi there,

    After a closer look our theme team has identified this as a bug, due to the fact that you are using an older theme that was created/launched long before we had a block editor (or patterns) to content with.

    They are investigating a fix but I do not have an ETA on when that would happen since they are still determining the source of the problem. Sadly there is not a workaround that you can use at this time to bring the patterns back onto the page while using your current theme.

    You can if you wish switch to a newer theme (one that was released after the block editor) and the patterns will behave correctly. If you are interested in this option we are happy to check out any themes you would be interested in, to make sure they will be compatible with your current blocks.

    Thanks!

  • Thanks for continuing to look into this! I am open to looking into newer themes. Do you have any suggestions similar to my current “Publication” theme?

    I’d also want to make sure any theme changes don’t impact other existing content on the site, as I already have 60+ pages published.

    Another option could be for me to build out these same patterns manually for my home page with columns, images, buttons, and text. Do you think this would work, or would it have the same issues as the patterns?

  • Hi again,

    I’d also want to make sure any theme changes don’t impact other existing content on the site, as I already have 60+ pages published.

    For the most part, changing your theme is a lot like changing the clothing on a mannequin. Your content (pages, blog posts, uploaded media) doesn’t go anywhere or change that much… they just assume the style of the new theme.

    In this case, you would just be switching to a theme that can better display the block patterns you are using currently, but I would not expect other content on the site to change dramatically.

    Are there any specific pages you are concerned about? I checked on a few at random, and they are pretty simple and just show text and images but no complicated layouts. Happy to take a closer look at any pages you are concerned about.

    I am open to looking into newer themes. Do you have any suggestions similar to my current “Publication” theme?

    Yes, I think so. Not exactly the same, of course, but I see you have a pretty minimal site design at the moment. Any of these seem like a good fit:

    https://wordpress.com/theme/appleton
    https://wordpress.com/theme/zoologist
    https://wordpress.com/theme/attar
    https://wordpress.com/theme/spearhead-blocks

    Worth noting that the demo sites on those pages show demo homepage layouts made of blocks, but when you switch, your theme will not have that exact layout. Instead, you will see your existing layouts, but the site will use the header, footer, fonts, etc., of the theme you are switching to.

    Another option could be for me to build out these same patterns manually for my home page with columns, images, buttons, and text. Do you think this would work, or would it have the same issues as the patterns?

    I think you will have the same issue since the problem is found in the settings of specific blocks, not the fact that those blocks are loaded as a pattern. If you were to create the same layout using individual blocks, you would have the same display issues.

    If you were to decide to stay with your current theme, I would instead recommend waiting with what you have now. But if I’m honest, since you are using an older theme it’s recommended to switch anyway. As the new block editor progresses and improves, older themes like this will likely have new issues over time. Updating your theme would avoid that.

    Hope this helps!

  • Thanks so much for your continued help! I tried switching to a few of the themes you suggested, but I didn’t like any as much as my original “Publication” theme. Any chance this theme will get updated in the future?

    That being said, I tried switching it back to “Publication” to see if the bug would persist. Interestingly, the bug renders differently on the homepage and all other pages – it still shifts the content to the left, but now the content remains on the screen, with an the empty background filling the right half of the layout.

    Most of my users are mobile, where this theme still looks great, so I’m okay keeping it while I determine my long-term solution. If you have any further theme suggestions or workarounds for this current theme, I would love to hear them!

  • Hi there,

    Because this is an older theme, it’s not high on our devs priority to address it (when compared to our newer themes) so I’m not sure when it will be addressed.

    regarding the change in your site layout, I noticed is that your theme looks more like the demo because it has widgets in the sidebar areas: https://publicationdemo.wordpress.com.

    When I look at your site I see you have an empty text widget (perhaps it got added during your theme switches) which makes the sidebar appear, even though the widget itself is empty: https://dannymercuriohikesthewhites.wordpress.com/wp-admin/widgets.php

    I suspect if you remove that widget you will see the site return to it’s full-width layout.

    I tried switching to a few of the themes you suggested, but I didn’t like any as much as my original “Publication” theme

    What did you not care for about those themes you tried? Or what is is about yoru current theme that is making you feel like staying? The reason I ask is because the themes I suggested uses our new “full site editing” tools, so it’s much easier to customize these themes compared to our older ones. It may be the case that they could be customized to give you the look you are after.

    For example, in this recent webinar (recording here) you can see how we customized the Geologist theme for a totally custom look. There is quite a bit you can do to personalize these themes.

  • Thanks for the information! I removed the widget that was added when I switched themes, however, all my pages still render with the same error. Any other workarounds I can try?

    I like the font sizing, style, headers, menu, and color palate of the “Publication” theme – especially on mobile. It’s great to hear that these newer themes are more customizable, so long-term, I can explore creating what I like from my current theme into a newer theme that will better stand the test of time.

  • Accepted answer

    Hi again,

    Looks like those widgets are still there for some reason, but I removed them and for me the site is back to it’s full-width appearance. I’ve also added some custom CSS code that will place the content in view again on desktop, without affecting the existing mobile appearance.

    You can see that code here under the CSS tab: https://wordpress.com/customize/

    I like the font sizing, style, headers, menu, and color palate of the “Publication” theme – especially on mobile.

    Some of those bits of styling are very specific to this theme, so I’m not sure you could replicate every one by using a new theme. It was more of a suggestion if you were open to changing your design slightly in exchange for a theme that is more “future-proof”

    Hope that helps. Please let us know if you have any more questions.

  • That worked – thanks so much for all your help!

    Hopefully these fixes persist and I won’t have to reach out again on this topic :)

    Have a great rest of your day!

  • The topic ‘Pattern shifts content off web browser’ is closed to new replies.