Image will not resize on tablet and mobile previews
-
I’m trying to create a fairly simple site to promote an eBook I have coming out soon. I’ve created an image to go at the top which is a landscape version of the book’s cover, but when I preview the home page on the tablet and mobile formats, the image stays the same size, only displaying the centre section in the reduced frame. The text re-wraps automatically, but the image doesn’t reduce to the smaller width needed. I’ve tried researching as best I can, but I’m not exactly an IT wizard and I’m getting lost. I’m using the Morden theme, which is listed as a Responsive Layout, which I thought meant the image would re-size. Does anybody have any ideas where I’m going wrong?
-
Hello!
You are not going wrong. It’s just how the theme works. Some other responsive themes also crop larger images on smaller displays.
If you look at the Morden demo site, you will see the cover block images change in the same way. Your challenge is to choose an image or graphic that works for the changes that happen with smaller displays. The Morden demo site offers two examples. (on the front page and the News page)
If you are not familiar with all the cover block settings, it’s worth reviewing those briefly and taking notice of the Focal Point Picker. That is how you can influence what part of an image goes away.
-
Thank you drizzleblocks, this is extremely helpful to me! I’m not sure I’m going to be able to create an image that works well with parts of it removed in the smaller displays, because the cover of the eBook is essentially all wording (in other words, there’s no superfluous image to play with), although I will have a go and see how I get on. Assuming it doesn’t work very well though, I presume there are other themes which will re-size the whole image automatically? How can I tell which these are? Because it might make more sense for me to switch over to a different theme rather than have an image which looks good on a phone but less good on tablet and desktop.
-
Hello again!
I suggest that you try changing the Cover block with the book cover image to an Image block. You will give up the Cover block overlay features such as adding a tint, or text, or a button, but the your book cover image will remain whole in the Image block and shrink to fit smaller displays.
To change a block type, follow the instructions at this link:
https://wordpress.com/support/wordpress-editor/#changing-a-block-typeFor best results, invest a little time in reviewing and experimenting-with the Image block settings. You may discover some controls or settings beyond the defaults that work better for your design goals.
-
Aha! GENIUS! You can’t imagine the frustration and exasperation I would have saved myself if I’d just come and asked for help first :) I am so indebted to you, thank you.
At this point you are completely entitled to tell me to go away and work it out for myself, but at the moment each page on the site has a big word at the top centre saying which page it is (Home, About, Contact, Blog) which seems a bit superfluous to me given that those are all featured clearly in the menu. I presume those can be removed? I think I even succeeded in doing it in one of my 94 previous attempts to get something workable, but quite how is lost in the mists of time.
-
Hello again and thanks for posting again to share what worked for you. That helps others who have a similar question in the future.
People volunteer here and at the WordPress.org support forums because they want to help, so it’s always OK to ask more questions.
It also helps others if you create a new post when your question pertains to a different topic. For that reason, I will ask that you do that for your follow up question.
Some aspects of the answer to your follow up question may be different depending upon how you are hosting your site. If you have a site on WordPress.com, please create a new post in this forum. If your site is with another web hosting company, you should post in the WordPress.org support forum instead.
There are different forums to account for the differences between WordPress.com sites and WordPress.org sites.
Either way, if someone else should answer your next question before I do, it is not because I decided you should work it out for yourself. The availability of those of us who volunteer can be intermittent.
Best wishes with your site and the launch of your eBook!
- The topic ‘Image will not resize on tablet and mobile previews’ is closed to new replies.
WordPress.com Forums 