Hi there,
How can I make the images scale so they appear at full size? Ideally the mobile version of the website would look the same as the desktop version. On mobile if you request desktop site that is basically how we want the mobile to look.
Harmonic’s design is optimised for the size of the screen it’s being viewed on and, as part of this, the panels’ background images will indeed be cropped.
Background images that work best are more flexible, decorative or abstract, so they can handle some sort of cropping.
One way to display full background images on mobile devices is with the following custom CSS:
@media only screen and (max-width: 40.063em) {
.bcg {
background-size: contain;
}
}
If you add the above, you’ll notice that the background images take up much less room (as they’re scaled to fit the smaller screen) and repeat themselves to account for that.
Adding more content, as you suggested, is another way to increase the height of the panels and get more of the background image to display.
2) See any of the ‘Show’ posts or ‘Video’ posts. The titles, content, and any other elements on the page (previous, next, etc) all appear like their is a black shade over the text. In theme options background colour is set to black. We are currently using a plug-in (Font- Version 7.5.1) to correct this, but I don’t feel it’s the best option. How can we fix this without the bandaid solution of a plugin that needs to be used after any new post?
I activated Harmonic on my WordPress.com site and changed my background to black using the Custom Colors feature. This feature automatically changes the colour of the rest of the text on a site so that it contrasts with the black, and I was able to use to generate the following CSS for you:
http://pastebin.com/Saw01Fq4
You can copy/paste the above CSS to either the editor for your CSS plugin or the style.css file of your child theme.
Let me know if that helps out. 🙂
@siobhyb
Thanks for the help! Changing the text/element colours worked great. The mobile options didn’t. Is there any way we can override the mobile function and have people on mobile taken to the desktop view instead?
What is the best way to go about changing the font? Also, once I activate the tag line and logo, how do I go about hiding those in the custom CSS?
Thanks again!
Hi there,
Is there any way we can override the mobile function and have people on mobile taken to the desktop view instead?
There isn’t any easy way to stop the theme from adapting to devices of different sizes, as there’s a lot of CSS in the theme’s style.css file that contributes to that behaviour.
It’s worth noting, also, that viewing the desktop version of your site on mobile would be a poor experience for your site’s visitors. The content would appear very small on the screen and they’d need to manually zoom in.
As it stands now, your site is optimised and your content is very readable for mobile visitors.
What is the best way to go about changing the font?
There isn’t a built in option to change your font with the theme, but you could consider a plugin from the ww.wp.xz.cn repository to do the job for you:
https://ww.wp.xz.cn/plugins/search.php?q=font
When choosing a plugin, I recommend looking for one that’s well supported and that has a high rating from its users.
Also, once I activate the tag line and logo, how do I go about hiding those in the custom CSS?
The tagline and logo can be hidden with the following custom CSS:
#para-template #slide-1 .hsContent #header-branding {
visibility: hidden;
}
Hope that helps!
If you have extra questions, please start a new forum thread for each different one and we’ll help from there.
