Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Site is here:
www.functionbrewing.com/sandbox/
On the mobile and tablet views, I’m getting some weird white space, and I can’t seem to figure it out.
Any help?
Thanks!
Steve
Hi Steve
Are you still experiencing this problem? If so, can you let me know where on the home page I can find the spaces, I’m not seeing them at the moment. Thanks.
Thanks for the reply.
I’m using the Moesia theme, and switched to another theme for a few minutes to see if it was a theme issue, and now can’t figure out why Moesia is at two columns (and looks horrible right now). So I can’t really explain without getting the theme back to one column. (I’ve deleted and reinstalled, but there must be some settings hanging around that are keeping it at two column).
Steve
Ok, I got the column issue fixed (finally). When I switched themes somehow the front page template got changed back to default. So, the white spaces are there again on the mobile and tablet views (but not on desktop).
Thanks. The issue below the contact form is due to:
@media screen and (max-width: 1024px) { .panel-row-style { background-attachment: scroll !important; background-position: center top !important; -webkit-background-size: auto !important; -moz-background-size: auto !important; background-size: auto !important; } }You’ll find that rule in the theme’s stylesheet.
background-size: auto will do the following:
auto Default value. The background image is displayed in its original size
https://www.w3schools.com/cssref/css3_pr_background-size.asp
At some point, the container is longer than the image so you get white space. You could try increasing the size of the image to handle this. If that isn’t an option or won’t work then it would be best to reach out to theme support and ask them how to change background-size: auto to background-size: cover below say 780px.
This is beyond our free support scope but you can try adding to Customize > Additional CSS:
@media screen and (max-width: 780px) { .panel-row-style { background-size: cover !important; } }Not sure it’ll override the
!importantin the themes style.css file though.Sorry for my delay in response.
Thank you for your help. Understanding what was causing this should enable me to get the kinks worked out.
Cheers!
Steve
For sure :) Let us know if you’re still stuck after taking a look. Cheers for now.