Masonry Grid Issues

Hi,
Sorry for the very late reply, and thanks for the link to your site. I took a look but I couldn’t find the masonry grid as shown in your screenshots, if you could link to the page I sure we could help with the background shadow.
I also checked one of your blog posts H1 title and it seems to be set to a font size of 30px for both desktop and mobile, this is the H1 you meant correct? The login token doesn’t seem to allow me into the backend to check your settings, please check.
As for the image size of the blog page, the page container width is set to 1010px, which is consistent with your “boxed” layout for your site, but your blog gird is set to 3 posts per row, so to achieve this the images must be smaller, if your grid was set to 2 posts per row the images would be larger, or we can change the width of just the blog page so the images are larger, 1310px for example.
Please try changing the number of posts per row, or try changing the width of your pages in the theme settings to see if this would help.

Best regards,
Mike

Hi,
Thank you for the screenshot, from this I see your max-width is set to 1250px, but your blog page is still 1010px, this css would correct:

#top.page-id-248 #main > .container_wrap.fullsize > .container {
    max-width: 1250px !important;
}

I used the page ID after “#top” in the css above because it looks like this page is not set as the site “blog” page, if it were we could use the “blog” class after the “#top”.

To set the post H1 to 40px please try this css:

#top .fullsize .template-blog .post-title {
    font-size: 40px !important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, #1: yes in the theme options: Enfold Theme Options > Performance > JS & CSS file merging and compression & Enfold Theme Options > Performance > Load jQuery in your footer.
For #2 for desktop, & for your second post: mobile homepage and blog post cover photos
I removed the css:

#top.single .container {
	  padding: 0 !important;
	  width: 100% !important;
	  max-width: 100% !important;
	}
	
	#top.single .content {
	  padding-top: 0 !important;
	}
       .responsive .single .container {
		max-width: 875px !important;
	}

I also found an extra bracket in your Quick CSS that could have thrown things off, I’m not sure that it did.
I then cleared your 3 caches: Autoptimize, Asset CleanUp Pro, & WP Rocket, and this seems to correct by allowing the theme settings to set the widths. Please try clearing the “caches” and your browser cache and check.
I feel that using the classes .container & .content is too general as they typically occur several times on a page, thus your last two screenshots. We can make this more specific, but I don’t see the need for it, please check.

Best regards,
Mike

Hi,
Glad to hear this helped, the reason your featured images were smaller was due to the JetPack
plugin:

when this setting is set the images are stored on WP servers and height and width is added to the image URL, which is not the correct size. I disabled this setting and now your featured images height is correct. I also had to clear your autoptimize & rocket plugins a few times, while you are trying to adjust your site you may find it easier to see your changes by disabling all of your caching, just a tip 🙂
Anyways, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, I checked your new post and found that it doesn’t include the different images sizes that it should, as your older post does. Please see the screenshots in the Private Content area.
I believe that a plugin is preventing the media upload from creating all of the “thumbnail” [image] sizes, I tried disabling some options in some of your plugins and tried uploading the featured image again but the new sizes don’t seem to have been created.
I restored all of my changes from today’s test, please try disabling your plugins and reupload a test image until the images sizes are created.
I suspect these plugins, based on their image settings:
Autoptimize
JetPack
Compress JPEG & PNG images
Lazy Load – Optimize Images
Smash Balloon
WP Rocket
WPGeared Speed Optimization

*If this setting is your intention and you would like to force the single post featured image to full view on desktop you could use this css:

@media only screen and (min-width: 1440px) { 
#top.single-post .fullsize .template-blog .big-preview img {
    height: 95vh !important;
}
}

Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike