Images too big to show on mobile
-
Currently my images are not scaling down when I view my blog content on a mobile device. I can see about 1/8 of my image and the rest is off the screen because the image is too large. How do I make my images reactive to the size in which the page is being viewed?
The blog I need help with is: (visible only to logged in users)
-
Hi –
I’ll be happy to have a look at this. Can you let me know which mobile device you are using? the operating system? and what browser you’ve viewed the site including the version number?
Add screen shots of what you’ve described to the media library so that I can compare those to what I find also. Thanks!
-
Sure, thanks for your help :) I am using an iPhone 6s with iOS 11.3.1. I believe Safari is the same as iOS so it’s version 11.
Here are two examples – the text is centered but the images are huge and running far to the right:
-
Good morning –
Thanks for sharing that information with me. I am able to replicate what you’ve reported on my iPhone 8 using Chrome and Safari.. All the posts are formatted this way.
Do you mind if I work on one of them to see if I can get the mobile display to be more aesthetic? Would the Birthday post be alright? Let me know. Thanks!
-
-
-
Alright. Things are looking better now. Please look at the Birthday post and let me know if that’s more in line with how you expected it to appear on mobile views.
Once I hear back I will outline the changes made and what not so you can replicate the appearance for your other posts.
-
Thanks for the help!
I think the images now look OK but all of the formatting I’ve done to the post content previously seems to have disappeared. The text is no longer centered, copy is not evenly spaced between with the images, and there are big odd gaps between the text (no idea why this last one is occurring). Here are some images of what I’m seeing:
Is it possible to update the formatting of the images but keep my updates to the text as well?
The text alignment and spacing is showing this way on desktop and tablet now as well which is not ideal.
-
The spacing issue is easy enough. Just requires a simple ‘delete’ to line the text up.
As for the actual text, I do not recommend using center aligned text. It is more difficult to read and format. Traditional left alignment text is the gold standard for a long post like this.
All of the text in that post has been re aligned from center to left for that reason. It also fixed the issue where the text was bleeding out past the images.
Going forward, to recreate this appearance you’ll want to do the following.
1. left align all of the text
2. click on the images, select the pencil icon to edit, change the size to “large” — or smaller, whatever looks good to you — from “actual size”. Adjust the alignment to “none”. Save.Using smaller images in your posts will help them load faster, and there’s no need really to use the actual size. It will just eat away at your storage allotment. More information about that is available here: https://en.support.wordpress.com/images/
Another idea, that you may enjoy, is using image galleries in the posts. There are different formatting options available with that route as well. https://en.support.wordpress.com/gallery/
I’ll iron out the spacing issue now. Write back to me here with any other questions about this information.
-
-
Hi there – thanks for your help.
I would prefer to keep the text centered and I do not want to have to adjust it manually each time.
As for the text spacing, in the editor it looks evenly spaced with images, but then when I publish the post, the spacing becomes uneven despite not looking so in the editor. I’ve struggled with this for some time. This is why I added the additional code to make sure the margins are spaced evenly. Even if there were a way to remove the extra line in the editor as you suggest, I would then have to go back and do this for hundreds of posts. Hence I would prefer to keep the code that helps adjust the margins.
It would be great if there was a solution to adjust the size of the images without having an impact any of the visual updates I have already made – I was really content with how it looked save the image size issue. Is there a possible solve for this?
Best,
Ali -
Hi Ali –
If you use center aligned text you will continue to have issues with formatting. It’s really only optimal for something like a photo caption, not an entire post. It’s more difficult to read and can also get mis formatted when shared to other services, like social media.
By any chance are you writing your posts in a word program and then copy + pasting it to your editor here? It’s best to create the posts directly here, because when copy + pasting the formatting differs between programs and it will get all messed up. Not sure that’s the issue, but thought I should mention it.
You may find out that there’s a different theme that works better for how you want things to be displayed. Is that something you’ve considered?
-
Okay – that’s too bad it doesn’t work with the theme. I just purchased it and was really looking forward it to customizing it to suit the layout I had in mind.
I write directly in the editor each time so I don’t think a word doc is responsible for the formatting issues.
I know you’re the pro here, but are you sure adding something similar to the following code wouldn’t automatically help re-size the images for different devices? This is what I had in mind when I came here looking for help, and I’ve seen it referred to elsewhere on the web, but I am just not sure how to implement it correctly in my custom CSS:
.responsive {
max-width: 100%;
height: auto;
}There’s also an option to set ‘media width’ in the customizer as well. Changing this also wouldn’t be a solution?
Lastly, I edit all of my images before importing them into WordPress. Is there an optimal width I could set them to before I upload them to the site that would help them display correctly on mobile and desktop?
If you could remove the changes you’ve made I will continue to play around with it myself and will hopefully figure out a solution.
Best,
Ali -
Good morning –
I’m happy to hear that you’re creating the posts directly in our editor. That surely cuts out some of the unknown possibilities.
You can certainly try using some CSS to get the desired effect that you’re looking for. To add that code, click on My Sites – Customizer – CSS
If the CSS configuration proves to be too great, just get in touch with us via live chat support https://wordpress.com/help/contact/
Some other CSS resources are available in these guides:
https://en.support.wordpress.com/custom-design/editing-css/
https://en.support.wordpress.com/custom-css/
https://en.support.wordpress.com/custom-design/css-basics/Changing the media width could help.. It’s worth a try.. That’s not the route I went when I edited the images in the Birthday post. The width is going to max out at the size of your content area though, which is what you are already seeing (more or less). The images aren’t going to display across the entire desktop view.
Under the Media Settings you can change the sizes dedicated to the thumbnail, medium, and large uploads. That setting would be found here:
https://pressedwordsat.wordpress.com/wp-admin/options-media.phpMore details about image optimizations are available in this guide: https://en.support.wordpress.com/media/image-optimization/
I think that the images weren’t scaling down as mentioned in your original post because they were uploaded at actual size. Reducing the size of the images and using a standard size will help the appearance on mobile. A bonus effect of that would be that the posts are going to load faster and perform better with out all the extra baggage from the huge file sizes. That’s what I did before. From the post editor, click the image, select the pencil, change the size and save.
- The topic ‘Images too big to show on mobile’ is closed to new replies.
WordPress.com Forums 