Hi Julian,
Good questions. Let’s see if we can help you out here.
1. You can change the font sizes on smaller screens. Let’s change the CSS there to this:
@media only screen and (max-width: 520px) {
h2 {
font-size: 16px !important;
}
p {
font-size: 14px !important;
}
}
I noticed in the code of your home page, that a size is set for most of the paragraph text inside of the widgets there. Those inline font sizes are going to keep the media query from overriding the size on smaller screens. You’ll need to take those out and something like this to the Custom CSS to control the size of the paragraph text there:
@media only screen and (min-width: 521px) {
.home .widget p {
font-size: 18px;
}
}
You can replace background images based on screen size. To do that, first upload the image you’d like to use in the media library. Once the upload is finished, WordPress will give you the URL to that file. Copy that, you’ll need it in a minute.
Then go to the custom CSS box in your theme options page and add this:
@media only screen and (max-width: 520px) {
div#home-one {
background-image: url(https://yoursite.com/image.jpg);
}
}
Replace the http://yoursite.com/image.jpg with the URL to your image. That snippet will change out the background image in the first home page block when the screen is 520 pixels wide or less. You can change the 520 in that snippet to adjust the point at which that changes. You can change the #home-one to #home-two to target the second block and so on.
Hope that helps out.
Have a great week,
Bill