images

Can’t get images to align with Gutenberg editor

CSS In Customize -> Additional CSS, add the following code: .clearflow { clear: both; } figure.alignleft { margin-right: 1rem; } Blocks Insert blocks in the following order: Image Paragraph … Paragraph Image Paragraph … Paragraph Select Image block, and on its toolbar, select Align left icon. In Advanced -> Additional CSS Class section, add clearflow … Read more

How can I add a “data-pin-nopin” the featured image html?

Simply edit your themes header.php and place the following snippet between the <head></head> tags to prevent pinning globally. <meta name=”pinterest” content=”nopin” /> Alternatively you can use the Pinterest Block plugin from which offers you more fine-grained control, also for single posts. This plugin allows you to block selected posts and pages from getting pinned on … Read more

Hero image cropped at different dimensions

Instead of creating a new image size or uploading a completely different image just for mobile you might want to play around with object-fit and object-position CSS. object-fit and object-position work basically the same as background-size and background-position but instead of being applied to background-image’s only they work on objects like the <img> tag. Use … Read more

+ More