- Posts
Hi there – I’m using a photo as a background on the desktop site which looks good because it stretches across the page but it looks terrible in mobile because it’s scaling just to the center of the image. I saw a support post which said that the way to fix this is to upload the image as a photo not background, but when I do that it doesn’t look as good on the desktop site because it doesn’t stretch across the whole screen. Is there a way to keep it that wide on desktop but still have the whole image appear on mobile?
Hi Sam-
Thanks for the question, and thanks for using the Crio WordPress theme.
Background images will always have some kind of scaling, or worse, tiling depending on the screen size.
There are a few things going on that might be giving you trouble accomplishing this. It’d be tough to try and describe it all, but I took the liberty of re-writing your first block on the homepage so that you can simply paste this in.
First, switch to the Text editor tab. Highlight your code from the very top, until you reach the </div> just before the second section that starts with <div class=”boldgrid-section”>
Then, replace that section with this code:
This solved it! Thanks!
Thanks! traveling for a few days but will try it. I did switch the picture yesterday so just want to make sure the code you gave me will still work for how it is now. Also another question re mobile platform – on the Meet the Band page on desktop looks fine, but mobile for some reason puts a hyphen on Elijah Farbrother (so it reads Far- and then brother on the line below) rather than just dropping the whole last name to the line below. Do you know how I can fix that? Thanks so much!!!
Hi Sam!
The hyphens that appear for headings on the mobile display for the Meet the Band page are coming from some of the default style rules included in Crio that are intended to allow for larger font sizes on mobile screens, however that behavior can be changed with some Custom CSS.
We have a section in our Working with Fonts in Crio article that provides a CSS snippet that you can add to your site that will remove the hyphenation for your headings and I hope that will help you create the design you are looking for.
Please let us know if you ever have any other questions for us Sam!
Thanks. Just to confirm then – I would – In the Dashboard navigate to Appearance → Customize
In the Customizer menu navigate to CSS/JS Editor
Enter your custom code from that article
Click the Publish button to save your changes.Is that correct?
That is correct Sam! Once that code is published in the CSS Editor the headings on your website should no longer break on smaller screens and automatically hyphenate. I tested the code in one of my development environments and had the intended result there, but please let us know if that implementation works for you!
It worked! Thanks much!
- The topic ‘How to show full-width image background on mobile’ is closed to new replies.
