-
I have not worked on or edited pages on the website davesdeckandfence.com for some time. Today I decided to add a new page by cloning an existing page. When I edit the new page the formatting is all off from the page I cloned. I then went in to edit the original page I used for my clone and the formatting is all off on that page as well. I then tried to edit other pages and get the same thing. You can see what I’m talking about by looking at the Fences page and then take a look at the Vinyl Fencing page under the Fences drop down menu. It’s been a while since I worked on this website other than updating plugins so I don’t know what changed.
-
Hi Bhrenko,
For reference, can you share a screenshot of the issue from your end?
Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots
-
I will try to upload screenshots tomorrow but I will provide the URL in the private area for reference.
-
Alright. The screenshot is so we have a basis of comparison for what you see in contrast to what we see from our end.
In any case. It’s best practice to just Edit the page > Duplicate the section you wish to copy > Cut (Ctrl + X) > Then Paste it on the new page. This ensures that a new ID is generated for the Blocks, thus preventing styling issues.
-
It’s not just the cloned page that has formatting issues when I go in to edit, every page on the website appears to have the same issue. The edit view from within WordPress is not formatted the same as what I see through a browser, and this was not occurring previously. I suspect that if I click Update after going in to edit the page the changed format will go live and can be viewed through a browser.
For the Fences page which I have not made any changes to in months this is what I now see when I go in to edit it. It now looks very different than the last time I went in to edit this page and I have changed nothing other than updating plugins and WordPress. (see dropbox link below)
https://www.dropbox.com/s/hr25la14kux1g36/Edit.png?dl=0
When I view this same page through a browser this is what I see and this is how the page looked in the editor previously.
https://www.dropbox.com/s/73bt1djr30bpiku/Browse.png?dl=0
Thanks,
-
Hi there,
can you try Regenerating the CSS in Dashboard > GenerateBlocks -> Settings and then clear any plugin / server caches ?
-
I used the Regenerate CSS Files button but this did not appear to change anything.
https://www.dropbox.com/s/ldtbiz3e3u4pjq8/Regenerate%20CSS.png?dl=0
Thanks,
-
When you say Clone the page – how are you doing that ?
-
I used the Yoast Duplicate Post plugin to clone a page and then when I went in to edit that page I discovered the formatting issue. I then looked at the original page I used for the clone through the editor and found the same formatting issues.
I checked other pages and they all seem to have the same formatting issues when viewed through the editor. The newly cloned page is the only one that displays these formatting issues on the front end through a browser because it’s the only page I have published or updated since discovering the issue.
The Gates page at the link below has not been edited or touched in months but when I go in through the editor the formatting is all wrong which it was not the last time I was in there. I have not changed anything on the page but it’s giving me the option to update and my guess is that if I click update that funky formatting will be saved and viewable through a browser.
https://www.dropbox.com/s/amxj1ruuatdbj60/Gates.png?dl=0
The cloned page is where I discovered the issue but I don’t believe it’s the cause as most of the pages have formatting issues that were not there previously when viewed through the editor. I am on WordPress 6.2 and just using the built in editor. Could this have to do with the editor in 6.2 as these pages were originally published back in December of 2020 using whatever version of WordPress was current at that time?
Thanks,
-
I think some of the issue is to using the Clone option of that plugin. As it can lead to conflicting IDs and probably is not regenerating the CSS classes.
I believe that plugin has a New Draft option, which does the same thing but it doesn’t save the post until you do, at which point new IDs are generated. Could you try that ?
-
The newly cloned page was created as a draft but that’s not the actual problem just what lead me to discover the problem.
The real issue is that the page formatting for all my pages has changed when viewed through the editor. This is not just the cloned page, when I go in to edit any of my pages the formatting is not the same as it was previously.
As an experiment I took a screenshot of the Chain Link page which has not been edited in over a year (see link below). This is how the page should look.
https://www.dropbox.com/s/npr2uf63wvj39u7/Chain%20Link%20Front.png?dl=0
I then went in to edit the page and the formatting is quite different. (see below as viewed through WordPress editor)
https://www.dropbox.com/s/l0xfu0a74tpx2hu/Chain%20Link%20Back.png?dl=0
Without changing anything in the editor I simply clicked Update and the formatting issues are now live and showing on the front end through my browser (link below)
https://www.dropbox.com/s/b5pgt2utmw4bwqv/Chain%20Link%20Front%202.png?dl=0
What I am trying to figure out now is how the formatting for all my pages has changed from the last time I went in to edit one.
The cloned page simply recreated a page that already had formatting issues so it’s not the cloned page that is the issue it’s that the formatting on all my pages has changed.
Thanks,
-
Can we get a temporary admin login and the URL to that page in your screenshot ?
-
You will find the temp login in the private information area.
It might be more helpful to look at the Decks page through the editor so you can see how the formatting looks there and then compare to how it looks on the front end at http://davesdeckandfence.com/decks/
The Chain Link page I mentioned can be found at http://davesdeckandfence.com/chain-link/
When I went in to edit the Chain Link page the formatting was off there as well. It looked fine on the front end until I clicked Update without changing anything which saved the funky formatting that is now displayed on the front side at the URL above.
Thanks,
-
Hi there,
On the decks page, you are using a plugin metaslider for the image, that’s not something that GB or GP can control. The layout difference is depending on how the plugin output its CSS code in the editor and on the front end.
And for the Let’s get started building the Chain link fence of your dreams section, what funky formatting are you referring to? It seems to respect the settings you’ve made, the difference between the editor and front end is mainly because the width of the content changes as on the backend there’re block settings on the right and the block list view on the left.
The slider section on both pages seems correct with the setting, the container block on the decks page has a 40px bottom padding, while the container block on the chain-link page doesn’t.
If you can take a screenshot and highlight the funky formatting you are referring to, it would be helpful!
-
To explain the funky formatting on the Chain Link page, below is what the page looked like both through the editor and through a browser on the front end previously.
https://www.dropbox.com/s/npr2uf63wvj39u7/Chain%20Link%20Front.png?dl=0
You can see in the screenshot above how everything is lined up nicely.
When I went in to edit this page last week after not working on this site for some time this is what I saw through the editor. (link to screenshot below). You can clearly see that the formatting of my slideshow and the block and list to the right have changed. You can also see that the headings and text in the blocks below (Chain Link, Chain Link Fence, Shared Fences area) no longer line up and the columns are narrower.
https://www.dropbox.com/s/l0xfu0a74tpx2hu/Chain%20Link%20Back.png?dl=0
I did not make any changes to the formatting on that page so something changed that affected the formatting I see on the backend. As a test and without changing anything I simply clicked the Update button and now that uneven formatting is pushed through to the front end as you can see below. I looks like you clicked the Update button on the Decks page when you were in so that changed formatting is now live on the front end as well.
https://www.dropbox.com/s/b5pgt2utmw4bwqv/Chain%20Link%20Front%202.png?dl=0
I’m just trying to figure out how these pages where perfectly formatted previously as you can see in my first screenshot and now they are very much changed when viewed through the editor and also live if the Update button is clicked.
Thanks,
-
I did not make any changes to the formatting on that page
That’s strange as I can clearly see the paddings apply to the container block which contains the metaslider block.
GB would not change the values by itself. This is indeed very wired.
You can clearly see that the formatting of my slideshow and the block and list to the right have changed.
We can not control how the metaslider shows, either on the backend or the front end. So this is something you need to check with the plugin support.
Anyway, if you want the same layout as before, you just need to remove the paddings set for the container.
As for the 3 info boxes, your layout structure isn’t ideal, the vertical alignment for the Grid is set to align to the bottom, and you’ve set huge bottom padding for the left and right ones in order to top align with the center one.
Take an example of the fences page, when the screen is wide (2000px), it looks great:
But when the screen is narrow (1032px), the alignment goes off for both sections, it actually matches the backend as the content area is narrower in the editor than the front end.
Would you be willing to change it to a more stable structure, let me know!
- You must be logged in to reply to this topic.