Homepage Image – Not Mobile Friendly
-
Hello, my homepage featured image isn’t mobile friendly so I’ve added the code below to have it pull in a smaller image for a mobile screen, however it’s not pulling in this smaller image. Can you help?
@media only screen and (max-width: 640px) {
.home #hero.cover {
background-image: url(‘https://shannonrey.files.wordpress.com/2016/10/shannon-640w-text.jpg’);
}
}The blog I need help with is: (visible only to logged in users)
-
It keeps putting in the quotes around the file name, but this is what I’ve entered:
@media only screen and (max-width: 640px) {
.home #hero.cover {
background-image: url(https://shannonrey.files.wordpress.com/2016/10/shannon-640w-text.jpg);
}
} -
Hi @shannonrey,
Business Identity is designed for a large custom header that acts as a background image. In order for the background image to take up 100% of the screen’s available width, it may indeed get cropped at certain points.
Images that work best in the header are more flexible, decorative or abstract, so they can handle some sort of cropping. It’s not recommended that you use text with the image itself as, not only will this get cropped, but there isn’t a way of nicely scaling text within images so that it’s still readable on smaller devices.
The CSS that you’re trying as a workaround for this isn’t currently working due to the fact that the original background image is added directly to the theme’s HTML. It can’t be override with custom CSS unless you use the !important command.
Even with the !important command in place, the CSS won’t work as you intend due to the fact that the theme sets background-size: cover on that image. The background-size: cover property is used to make sure that background images take up the full width of available space.
If you’re fairly familiar with CSS (it seems you might be!) then you may be interested in reading a bit about the benefits of using background-size: cover and alternatives here:
For your purposes, you could use the following custom CSS to ensure the full, un-cropped image is displayed on smaller devices:
@media only screen and (max-width: 640px) { .home #hero.cover { background-size: contain; } }You’ll note that the above is not a perfect solution. It’ll leave space around the image.
Can I ask if there’s any reason you can’t include the text that’s on the image within the page’s editor itself? You could then use custom CSS to style the text to your liking, it wouldn’t be cropped at any point, and it would then scale nicely to remain readable across different screen sizes.
Let me know what you think about the above suggestions and if you have questions.
-
Thank you for the detailed information, this is helpful to know. I’m actually new to CSS and getting lots of great help from the team :)
I tried your suggestion, but yes you are correct, I don’t like the space around the image.
When I use the text from the editor (I’ve now switched it back so you can see it), the text runs over my face on mobile or when you shrink the screen on a desktop – so this isn’t really ideal either. But I’m guessing this may be the best solution if I want to keep an image of me as the homepage image, correct?
Is there a middle ground where we can have less of my face cut off on mobile?
-
Hi @shannonrey,
I’m glad to hear you’re getting lots of tips surrounding CSS from this forum. It’s such a fun and useful skill to learn!
If you’re curious about how I look for solution to questions on this forum: I use my browser’s built in tools to inspect a theme’s existing CSS and experiment with solutions. We have guidance on how you could use your browser’s tool in a similar way here:
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
When I use the text from the editor (I’ve now switched it back so you can see it), the text runs over my face on mobile or when you shrink the screen on a desktop – so this isn’t really ideal either. But I’m guessing this may be the best solution if I want to keep an image of me as the homepage image, correct?
I definitely think that using actual text (rather than including text within your image) is the best solution here. One of the benefits is that we can more easily customise the text with CSS.
For example, the following custom CSS will reduce the width that your text takes up on devices that are 640px or less:
@media only screen and (max-width: 640px) { .hero-content { width: 80%; } }The above should also stop the text from running onto your face in the image.
- The topic ‘Homepage Image – Not Mobile Friendly’ is closed to new replies.
WordPress.com Forums 
