afmeck

Hi @skalanter,

Thanks for the reply. Those lines of code are indeed included in the custom CSS section. They’re part of a block of code that was given to me by another OceanWP forum moderator to add margins to the sides of Gutenburg image and video/embed blocks in mobile view:

.entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
margin-left: 10px;
margin-right: 10px;
}

Removing that block of code fixes the centering issue but, of course, also removes the margins. Do you have any suggestions for a margin snippet that avoids the centering issue?

Thanks again!

Not a problem. Everything is looking good now.

Thanks a lot for the help!

I forgot to mention that replacing the above block with either of the two others you’ve suggested (pasted below for reference) or adding them to the field also doesn’t align the images to the center.

.wp-block-image .aligncenter {
    margin: 0 10px;
}

.wp-block-image .aligncenter {
    margin: 0 20px !important;
}

Thanks for pointing that out! The original block you suggested for controlling margins on mobile devices is now working.

Unfortunately, adding the closing bracket has also caused all of the images to be aligned to the left instead of the center despite being centered in Gutenberg, as shown in the screenshot below:

View post on imgur.com

I’m not seeing any other bracketing errors.

Here’s the original mobile margins block that I’ve kept in the Custom CSS field:

.entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
margin-left: 10px;
margin-right: 10px;
}

And here is the entire field as it stands now:

/* Full width button on the homepage */
.full-btn.elementor-widget-button .elementor-button { width: 100%; }

/* Newsletter form button */
.oew-newsletter-form-wrap .button { padding: 0 20px; }

/* Footer */
body #footer-widgets { text-align: center; }
body #footer-widgets .ocean-newsletter-form { margin: 0 0 26px; }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"] { color: #7c7c7c; border-width: 2px; border-color: rgba(255,255,255,0.2); font-size: 15px; letter-spacing: 0.8px; }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:hover { border-color: rgba(255,255,255,0.5); }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:focus { border-color: rgba(255,255,255,0.6); }
body #footer-widgets .ocean-newsletter-form-wrap button:hover { background-color: #5c7c19; }
body #footer-widgets .social-widget li a { color: #4a4a4a; font-size: 20px; line-height: 1; padding: 0.5em; }
body #footer-widgets .social-widget li a:hover { color: #8cba29; }

/* Scroll top button */
#scroll-top { right: 30px; bottom: 0; width: 48px; height: 35px; line-height: 35px; font-size: 22px; border-radius: 4px 4px 0 0; }

/* Footer newsletter form on responsive */
@media only screen and (max-width: 320px) {
    #scroll-top { display: none !important; }
}

.single .thumbnail img {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
}

ul.meta li i {
    display: none;
}

/*Hide Time & Date on Related Articles*/
#related-posts time.published {display: none;
}

body a {text-decoration:none!important;}

@media(min-width: 670px) {
    .single-post figure {
        max-width: 675px;
        margin: auto;
			margin: 1.5em auto; } 
} 
	
	@media only screen and (max-width: 669px){
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
	padding-top: 0; }
}

		.entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
    margin-left: 10px;
    margin-right: 10px;
}

Thanks for your patience with this. Any further suggestions would be greatly appreciated.

Here’s a screenshot of the Customizer CSS field with the last snippet you suggested above and the same page opened and reduced to mobile view showing no margins on the sides of the image:

https://imgur.com/zZYAYAh

And here’s the entire CSS field:

/* Full width button on the homepage */
.full-btn.elementor-widget-button .elementor-button { width: 100%; }

/* Newsletter form button */
.oew-newsletter-form-wrap .button { padding: 0 20px; }

/* Footer */
body #footer-widgets { text-align: center; }
body #footer-widgets .ocean-newsletter-form { margin: 0 0 26px; }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"] { color: #7c7c7c; border-width: 2px; border-color: rgba(255,255,255,0.2); font-size: 15px; letter-spacing: 0.8px; }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:hover { border-color: rgba(255,255,255,0.5); }
body #footer-widgets .ocean-newsletter-form-wrap input[type="email"]:focus { border-color: rgba(255,255,255,0.6); }
body #footer-widgets .ocean-newsletter-form-wrap button:hover { background-color: #5c7c19; }
body #footer-widgets .social-widget li a { color: #4a4a4a; font-size: 20px; line-height: 1; padding: 0.5em; }
body #footer-widgets .social-widget li a:hover { color: #8cba29; }

/* Scroll top button */
#scroll-top { right: 30px; bottom: 0; width: 48px; height: 35px; line-height: 35px; font-size: 22px; border-radius: 4px 4px 0 0; }

/* Footer newsletter form on responsive */
@media only screen and (max-width: 320px) {
    #scroll-top { display: none !important; }
}

.single .thumbnail img {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
}

ul.meta li i {
    display: none;
}

/*Hide Time & Date on Related Articles*/
#related-posts time.published {display: none;
}

body a {text-decoration:none!important;}

@media(min-width: 670px) {
    .single-post figure {
        max-width: 675px;
        margin: auto;
        margin: 1.5em auto;
    }
	
	@media only screen and (max-width: 669px){
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 0;
}

		.entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
    margin-left: 10px;
    margin-right: 10px;
}

.wp-block-image .aligncenter {
    margin: 0 20px !important;
}

Sorry for the slow response and thanks for the effort. Unfortunately, neither snippet seems to be adding any padding or margin to the images and captions.

Here’s a the for the page that contains the image I posted above: https://naturephotoist.com/ideas-macro-nature-photography/

No worries.

Thanks for the snippet but it doesn’t seem to be working. Still no padding on the sides.

No problem.

Here’s a screenshot that shows an image block and caption without padding on the sides: https://imgur.com/J2WXool

Hi @abhikr781,

Thanks for the snippet! It didn’t seem to work but did give me the idea to remove the last two lines from the following snippet given to me by either yourself or another OceanWP developer to prevent the player/block from being full-width:

@media(min-width: 670px) {
    .single-post figure {
        max-width: 675px;
        margin: auto;
        margin: 1.5em auto;
    }

    <strong>.single-post .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
        padding-top: 0;</strong>
    }
}

All is well with the video blocks now except that yet another snippet that I got from you guys to add padding to the sides of video blocks in mobile view has stopped working. I’m not sure if it’s related but replacing the above lines that I deleted doesn’t bring it back.

Here’s the mobile padding snippet:

.entry-content .wp-block-image figure:not(.alignfull):not(.alignwide) {
margin-left: 10px;
margin-right: 10px;
}

Any ideas on how to get that back?

Thanks for the help!

Thanks for the suggestions.

I should have mentioned that I only tested Elementor’s video block on my site, not with Gutenberg.

Anyway, I’ll check with my theme’s forum.

Thanks for the help!

Woops! I included the wrong link. Here’s the right one: https://naturephotoist.com/ideas-macro-nature-photography/

The Youtube block is inserted about 2/3rds down under “If not, then do yourself a favor and check out this introduction to the art (and introductory course) by legend Dirk Ercken (not affiliated):”

Thanks for the reply!

That worked perfectly. Thanks!

That worked perfectly!

Thanks very much.

Hi @skalanter,

That snippet solved the Elementor image size issue-thanks a lot!

The only issue I see now is a large space above the embedded video player in mobile view (that I forgot to mention in my original post).

Any chance that can also be solved with a snippet?

And thanks very much for answering my Elementor to Gutenberg question. I wasn’t aware of any of those options before (despite a lot of searching). I’ll do some testing and post your suggestions in my unanswered question over on the Gutenberg forum. I know at least one other user will be grateful, too.

Hi @skalanter,

Thanks for the snippet! It works perfectly for posts created in Gutenberg.

Unfortunately, it also causes all of my images to be unresponsive in tablet and mobile views but only in posts that were created with Elementor (before I switched to Gutenberg) and only images that were embedded in the text editor widget. I tested the image widget and those are responsive.

Since that seems to be an Elementor issue, I consider this problem solved but, since I have your attention and it’s a somewhat related issue, may I ask your opinion on transferring content from Elementor to Gutenberg?

Could I simply copy-paste the content and do a 301 redirect to the new Gutenberg post without losing link equity/juice?

That would be a lot easier than having to replace all of the text editor images with image widgets in Elementor (and probably also improve page load speeds).

Sorry to ask that here but I couldn’t get a reply about that in the Gutenberg forum.