I have pages where I want to have a picture and text wrapping around it. I set the pictures to be aligned left and it looks fine on my computer monitor, but it doesn’t look right when I view it on my cell phone. The pictures shows up above the text with a big blank space to the right as though I had not specified any alignment.
http://sandbox.southbaychildrenschoir.com/index.php/about/staff/ What’s happening?
Also, is it possible to change the margins?
Thanks!
Jessie
Hello,
Please add this code in the theme panel-> custom css box:
@media (max-width: 500px){
.alignleft{
float:left;
margin-right:20px;
}
Thank you!
Thank you!
Would modifying the code below work to make text wrap around a picture that was on the right?
@media (max-width: 500px){
.alignright{
float:right;
margin-left:20px;
}
After modifying the code, there are several pictures that have text wrapped around them on the desktop but don’t look right to have text wrapped on the mobile because they are too big. Is there a way to have those pictures centered with no text on the mobile but appear with wrapped text on the desktop? One picture I’m talking about is the picture from ‘Crazy Ex-Girlfriend’ http://sandbox.southbaychildrenschoir.com/index.php/about/. It looks fine on the desktop, but it appears to right of center on my phone with one word ‘In’ to the left of the picture.
Thanks!
Hello,
If you want to align an image right, do not do it from coding. WordPress lets you align images. Please use the wp button to align it right: https://www.screencast.com/t/JHR9wolLrm
Thank you!
After I inserted the CSS code you gave me, the text did wrap around the pictures in the text blocks on the mobile device like it was already doing on the desktop. My issue now is that several of my pictures that have text wrapped around them on the desktop are too big for text to wrap on the mobile, so it looks weird on the mobile because only one or two words are wrapped around the picture. The problem is that I want the pictures to appear on the right with text wrapped on the desktop but centered with no text wrapped on the mobile. Is there CSS code I could insert to make images that are larger than a certain width be centered on any mobile screen instead of having the text try to wrap around them?
Also, will inserting CSS code cause any potential problems when WordPress does automatic updates?
Thanks!
Hello,
Inserting custom css in the theme panel will have no effect on wp updates.
As for the image issue, css does not have an automatic image size detect. sorry. The best choice would be a compromise and have all image align center on screens smaller than 500 px and not have text wrap around any image on mobile as it was originally.
Thank you!
What is the css code that I would use to make all pictures appear centered with no wrapped text on mobile devices while keeping the wrapped text on the desktop?
Thanks!
This is the default implementation of the theme. Please check this article: https://demo.tagdiv.com/newspaper/wordpress-news-magazine-charts-the-most-fashionable-new-york-couples-in-2016/ Check the smaller image with a girl on her phone: https://www.screencast.com/t/EihrWT7Q9c
It is an image aligned left but on smaller screens it becomes centered: https://www.screencast.com/t/TsCKc4fJXv
Please remove your custom css and leave the theme on default.
Thank you!
It doesn’t appear that the default setting for my website is to center pictures on mobile devices. My site is http://southbaychildrenschoir.com. I notice when I have a caption with the picture, it will center on mobile devices, but not otherwise, and I don’t always want to include captions. What’s wrong?
Hello,
The caption has nothing to do with it. I cannot find any posts on your site though. It seems the functionality only works on posts.
Please add this code in the theme panel-> custom css box:
@media(max-width:500px){
.alignnone{
margin-left: auto;
margin-right: auto;
}
}
Thanks.
