Niall Madhoo

I mentioned why this is happening previously:

The first image is also larger because the aligncenter element has a max-width: 100%; width: 100%” setting. The default alignment,alignleft, and alignright do not specify any widths. This width is necessary for the centering to work correctly. So the first image displays at 100% of 400×400, meaning 400×400. The others display at 50% of 400×400, meaning 200×200.

You’re welcome! I will reply to your other post about the image.

If your question has been answered, it would be great if you would mark this topic as resolved in the sidebar. This helps the forum’s volunteers find the topics that still need attention and more people will get helped, possibly like you did.

This is what I’m seeing:

As for the classes and elements, those should have been generated automatically. Try deleting the images from the page and adding them again.

Your site is running on CloudFlare, which might explain why clearing the cache in W3 Total Cache and your browsers does not work. Please follow this guide to clear CloudFlare’s cached resources: https://support.cloudflare.com/hc/en-us/articles/200169246-Purging-cached-resources-from-Cloudflare. That might help fix the caching issue, so that you can view the changes you make to your site.

Hello @gesmer,

Choosing a theme depends on your budget. You have the following options from the cheapest to the most expensive:

• Free blog or magazine themes – it’s probably going to be hard to find a free theme with the kind of functionality you need advertised as a video blog theme. For this reason, a blog or magazine theme will be best, as they all have the functionality you described.
• Paid video blog or magazine theme – there are several marketplaces for these, the most popular being ThemeForest. You can also find themes from companies that market and sell their themes on their own sites, such as Elegant Themes. Most of these companies charge a yearly subscription fee or a pricier lifetime one-time purchase option. Some ThemeForest themes are regularly updated; many are not. There should be a theme with all of the functionality you’re describing built-in to the theme.
• Paid blog or magazine theme – these themes will also contain the functionality you need, even if they’re not specifically advertised as video blog themes or having video blog capabilities (most do advertise that). Again, ThemeForest, Elegant Themes, and other major theme marketplaces and theme developers will be your best bet.
• Customization of a free theme – you could pay someone to help you customize a free theme and your WordPress site to your needs
• Customization of a paid theme – you could also pay someone to help you customize a paid theme and your WordPress site to your needs. Some theme developers offer customization services of the themes they develop and sell.
• A custom-developed WordPress theme – this option will be the most expensive if you find a good and trustworthy developer (please don’t get scammed by someone doing one of the above options and charging you a small fortune for it!). The custom theme will also need regular maintenance by the developer, so you’ll probably need them on some form of retainer. For that reason, try to find a developer that uses a trusted and popular theme development framework like the Genesis Framework (its developers also have a marketplace with themes available for it).

Just make sure that the theme works with WordPress 5.5 or newer and that it is updated regularly. After the 5.5 update, some WordPress themes that use older code do not function correctly and require updates. And older code can sometimes create security vulnerabilities for your site, making it more susceptible to hackers.

Remember that as long as you are embedding video content from somewhere like YouTube and Instagram, any blog or magazine theme will work for you because the rest of the functionality you describe is available on every decent WordPress theme. WordPress has built-in support for embedded content like videos from YouTube and social media: https://ww.wp.xz.cn/support/article/embeds/ and https://ww.wp.xz.cn/support/article/video-shortcode/.

I recommend searching for a theme based on the following criteria:

• Price
• Regularly updated
• Ability to change colors easily with some form of customizer
• Support for page builder functionality to make it easy to customize your site’s layout. Page builders should work with all themes. Paid themes usually customize the styles and offer prebuilt templates and layouts for use with the page builder they support, which makes it easier for you to create and edit your site.
• Works with WordPress 5.5 or newer
• Video blog theme, video magazine theme, multipurpose blog theme, multipurpose magazine theme

A custom theme will require a developer, which needs another post to explain!

Hello @cindeevandijk,

I recommend that you contact your web host to help you with this issue, as this issue seems related to your hosting.

Hello @maxkim,

The first image is missing the wp-block-image class that the other images have. That is why it displays differently. On the first image, it is set on a div rather the figure element. Some of the other images have it set on the figure element, while others do not.

First image:

Second image:

Third image:

That means they will display differently, as they have a different element set to the same wp-block-image class.

Looking at the html output of your code, all the images are set to be 400×400. They all follow the img element set to max-width: 50%; on line 219 of your style.css file.

If I remove the max-width: 50%; or set it to max-width: 100%, the images resize. Using the max-width: 50%; rule gives the 200×200 sizing.

The first image is also larger because the aligncenter element has a max-width: 100%; width: 100%" setting. The default alignment,alignleft, and alignright do not specify any widths. This width is necessary for the centering to work correctly. So this image displays at the 100% of 400×400, meaning 400×400. The others display at 50% of 400×400, meaning 200×200.

As far as I can see, the Gutenberg code is working correctly. Some of the HTML elements and classes need to be changed for the alignments and sizing to work correctly based on how your theme is set up.

My guess is that your theme overrides the style.css file automatically, which is why changing that file does not work. A better way to add or override CSS in WordPress is to use the Additional CSS option in the customizer under Appearance > Customize: https://ww.wp.xz.cn/support/article/appearance-customize-screen/

I recommend setting up the images again so that they have the same HTML structure. You will probably need to set the images inside a placeholder to ensure that the alignments work correctly without affecting the image sizes.

If not, then set the figure classes to aligncenter then you can add .wp-block-image img {max-width: 25%} to the customizer to get the images to display at 200×200.

Hello @richchoe,

There may be a plugin or a feature of your theme that’s loading on this page and nowhere else. And it may be causing a plugin or theme conflict.

Please attempt to disable all plugins, and use one of the default (Twenty*) themes. If the problem goes away, enable the plugins one by one to identify the source of your troubles.

If you can install plugins, install and activate Health Check: https://ww.wp.xz.cn/plugins/health-check/
It will add a new feature under Tools > Site Health.
On its Troubleshooting tab, you can Enable Troubleshooting Mode. This mode will disable all plugins, switch to a standard WordPress theme (if available), allow you to turn your plugins on and off, and switch between themes, without affecting normal visitors to your site. Following these steps allows you to test for various compatibility issues.

There’s a more detailed description about how to use the Health Check plugin and its Troubleshooting Mode at https://make.ww.wp.xz.cn/support/handbook/appendix/troubleshooting-using-the-health-check/.

Hello @jimmyjamesjimmy,

The quickest way to change this is to:

• Visit Appearance > Menus inside your WordPress Admin dashboard
• Under Select a menu to edit, please select Main Menu, which I’m pretty sure is the name of your site’s primary menu based on the code I can see in my browser’s developer tools
• Delete the current Blog menu item
• Under Add menu items on the left of the page, select Blog – Posts Page and click the Add to Menu button:
  
  
  
• A new menu item titled Blog should appear at the end/bottom of the other menu items under the Menu structure section
• Drag and drop the Blog menu item between FAQ’s (is this correct? shouldn’t it be FAQs?) and About Us or wherever you’d like to position it on the menu
• Click the Save Menu button at the top or bottom of the MMenu structure section

That should change the menu to display the correct Blog link.