Images not aligning

Hello,

Did you change the theme in the meantime?

It seems the page is not using the Mesmerize theme.

Yeah, I went back to my old theme ‘cos Mesmerize looked so bad. ??

Do I take it from that you can’t trouble-shoot it w/out seeing it in action? I hesitate to put Mesmerize up and running in case clients look at the site but if you’re going to be around a a certain time I could probably do it for a bit?

Cheers… Simon

Hello,

Yes, can you specify the link of a test page so I can see the image issue?

I have the same problem and my site is live with mesmerize
see here for an example
https://dutchlaser.nl/vervolg-opdracht-voor-boegbeeld/

Small image should be floating left

I was actually looking for a new theme but I actually like mesmerize so if you can fix this that would be nice

Here another example https://dutchlaser.nl/kerstballen/. Same story image in the article should be left aligned to the text.

I managed to edit the css “class=”wp-block-image” ” and set float:left but that will affect the whole site

• This reply was modified 1 year, 11 months ago by baspisa.

Hello,
?
?Please add this extra CSS code in Customizer -> General Settings -> Additional CSS :

.single-post .wp-block-image {
float:left!important;
margin:20px!important;
}

Wouldn’t that be half a solution? What if I want to use both left and right align?

I did add the css to the customizer but now it forces everything to the left.

And it also forces images to align left next to titles. So this is not the right solution

• This reply was modified 1 year, 11 months ago by baspisa.
• This reply was modified 1 year, 11 months ago by baspisa.

Hello,

You can also use as an alternative the below CSS code:

.single-post .wp-block-image {
height: 0px !important;
}

that fixes the align problem but now I have a new problem.

See https://dutchlaser.nl/inlays-snijden/ for an example. now the text is placed over photos

I will leave it like this for a couple of hours but then I will remove it again because it is messing up my site

• This reply was modified 1 year, 11 months ago by baspisa.

Hello,

Please replace the previous CSS code with the below one and let me know if it works:

.wp-block-image .alignleft,
.wp-block-image .alignright,
.wp-block-image .aligncenter {
width: auto !important;
max-width: 100% !important;
}
.wp-block-image img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}

Hi Cristian,

No that doesn’t fix it. Text is okay again but both left and right align of images are still ignored
see for example
https://dutchlaser.nl/kerstballen/ should be right aigned
https://dutchlaser.nl/vervolg-opdracht-voor-boegbeeld/ should be left aligend

Hi Cristian,

I created a test blog for you
https://dutchlaser.nl/test-blog/

as you can see:
no left align
no right align
center align works
and no align is getting enlarged (is actually a 25% sized image)

Hope this helps

Hi
would not using the media and text block achieve what your desire?

Media & Text Block

@baspisa Try removing the previous CSS and add the following:

.wp-block-image.aligncenter, .wp-block-image .aligncenter, .wp-block-image.alignleft, .wp-block-image .alignleft, .wp-block-image.alignright, .wp-block-image .alignright {
    display: table;
}

.wp-block-image .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-image img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
}

.wp-block-image.aligncenter, .wp-block-image .aligncenter, .wp-block-image.alignleft, .wp-block-image .alignleft, .wp-block-image.alignright, .wp-block-image .alignright {
    display: table;
}

.wp-block-image .alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}

.wp-block-image.aligncenter, .wp-block-image .aligncenter, .wp-block-image.alignleft, .wp-block-image .alignleft, .wp-block-image.alignright, .wp-block-image .alignright {
    display: table;
}

.wp-block-image .alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}

.wp-block-image:before,
.wp-block-image:after {
	display: none !important;
}

@acosmin that seems to work perfectly! Many thanks for your solution!

• This reply was modified 1 year, 11 months ago by baspisa.