Images not aligning
-
Hi – I want to swap to Mesmerize but when I do tests of it, the images on my pages don’t align left, right, etc… They just sit there between paragraphs looking lost and lonely. π Looking at the code things seem to be in order so I’m a bit stuck…
The page I need help with: [log in to see the link]
-
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 3 years, 5 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
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 3 years, 5 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 aligendHi 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?@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; } -
This reply was modified 3 years, 5 months ago by
The topic ‘Images not aligning’ is closed to new replies.
