[Resolved] Backend looks ok but frontend broken

[Barbara]

Hi,

I’m using GeneratePress Premium and I’m renovating my website in staging mode. In staging mode, I changed the template from (I think) Sider to Connections. Right from the start, after editing, there were some differences between what I saw on the backend and frontend. For example, even though I changed the hero banner image in the backend and it looked ok, on the frontend it was still the old/original image showing up. I solved this somehow, not sure how, probably when I deleted the original image from the media library.

Then it was working ok for awhile until it broke again and this time several elements are broken. This happened when I was rearranging the blocks but I can’t figure out what I did wrong.

So far, I did the following to troubleshoot, with no success:
– Deactivated all plugins except GP Premium and GenerateBlocks
– Clicked “Regenerate CSS Files” in GenerateBlocks settings
– Selected “Inline Embedding” in GenerateBlocks settings (that made it even worse, even when I put it back to External File option)
– I followed all the steps suggested before opening the topic

I’d appreciate help to solve this!

Thank you,
Barbara

[Ying]

Hi Barbara,

Select the container with the background image, set its position to relative, or use element instead of pseudo-element for the background image:
https://www.screencast.com/t/oJUTbAaBQsqA

[Barbara]

Hi Ying,

Thank you, now the frontend is not as broken as before but the photo of the interior is blurry and text on the main hero banner disappeared. Both look ok in the backend though.

[Fernando]

The image that is used on the Frontend is a smaller version of the actual image.

Can you re-disabling all caching/optimization plugins?

It might be because of a plugin you have.

[Barbara]

I re-disabled and re-enabled all plugins (almost) one by one (including GP Premium and GenerateBlocks) and the issue is still there.

Before that, when I first tried to enable all plugins at once, a critical WP error occurred because of the Thrive Ovation plugin. I deleted the plugin, which solved the critical error, then enabled other plugins and disabled them again.

At the moment, the only two active plugins are GP Premium and GenerateBlocks. Still the same problem.

[Fernando]

Can you try re-uploading the image and re-adding it as a background image?

[Barbara]

I uploaded two completely new and different photos, still the same problem. Remember that there are two issues: the small photo appearing blurry on the frontend and no text on the hero banner photo on the frontend.

[Fernando]

Can you try reaching out to your Hosting Provider? It may be a server or CDN type of caching issue.

I checked and I can see your site is using Cloudflare which is a CDN.

[Barbara]

Hi,

I contacted the hosting provider and this is what they said (before that, I also deleted all cache through the options I could find on Cloudflare and in cPanel):

“We did not see any issues when checking the server or the Cloudflare service. The error occurs due to incorrect CSS codes that it outputs.

The “Hero Banner” can be fixed by changing the CSS codes, but for the image, we noticed that WordPress uses a 300×200 image, while the first image is 3x larger. If you would like to correct the image yourself, we recommend that you additionally check in the administration if you have the option of changing the size of the image.”

The strange thing is that with my old template and in the beginning of switching to the current template this wasn’t happening and the only CSS I added is the code to add customized fonts following your guide on this link:
https://docs.generatepress.com/article/adding-local-fonts/

I removed this font code to see if it would fix the problem but it didn’t. I don’t remember if the problem started before or after I added this code but I didn’t touch any other CSS in the “Additional CSS” section.

Also, I looked at the image size options but can’t find anything that would limit its size.

[Barbara]

Now I deleted all the CSS in the “Additional CSS” section and the problem is still there.

[Ying]

Hi Barbara,

Are we still discussing the home page? Am I supposed to be looking at the hero section?

If so, select the inner container of the hero section, set position to relative to set the container and its content above the parent container’s background image.

let me know if i miss anything!

[Barbara]

Hi Ying,

Thank you, this sorted out the hero section problem and the text on it is visible now. The second photo below the hero section (photo of a room) is still blurry though.

[Ying]

That’s normal behaviour as you selected medium as the image size, if you want the image to be clear, select a larger size for it.

[Barbara]

Ah, it looks good now. Not sure how this was overlooked before since it’s so simple, but thanks for your help!

[Ying]

No problem 🙂

[Author]

Posts