We chose the responsive Heirloom template and while in the mobile view our banner does not display properly. How can this be fixed? (Only a quarter of our banner shows.)
Our website is www.morganspets.com
Any help is appreciated. Thanks.
Below is a picture of the view we get while in responsive mobile view.
The banner has three different size options in the Style Designer: Contain, Cover, and Auto. I would suggest switching to Contain to get a better fit for a smaller screen.
The Style Designer can be accessed by going to Style > Designer. Under Colors, click Banner Image to see the size options.
For more information about the various elements you can tweak, please see: The Style Designer.
I hope that helps!
Jen - Thanks but changing the size option to contain shrunk the desktop homepage banner significantly. Also, under the mobile view the banner was multiplied.
Any more ideas on what I could try?
We did some testing in your account as the repeating banner was something I hadn't seen before! We uploaded your banner as a logo and removed some padding settings and the entire image now shows up in mobile and looks very similar to your current version for the mobile view. The main difference is some padding between your banner and navigation which is caused by this HTML code you added:
<style type="text/css">If you remove that and preview it on mobile I think that will give you the look you are after. If not, please let us know and we can work with you further.
The CSS code was in there because the homepage banner was too big compared to the other banners used on the separate pages.
From this other thread: https://forum.yola.com/yola/topics/how-to-remove-header-text-without-automatically-affecting-banner-...
Looking at sitebuilder, our homepage banner is much bigger and the other banners are now the same as the homepage. Whereas before they were different.
This was the original background for our other pages:
We appreciate the help but didn't want those changes to affect the desktop version. Is there a way to revert it back?
Also, the mobile view that you see on the sitebuilder is still different, banner wise, than what you would see on a real phone.
did you get my email I sent to you with suggestions?
We got the email but haven't looked at it yet. The backend is now different from what we had originally so we didn't want to make any more changes to it's reverted.
Adding the banner to the logo area in the Sitebuilder is the only way to ensure the full image is displayed in mobile devices but it does apply the image to all of your pages. It looks like you want to have the home page to have a different image than the rest of your pages.
There is a possible workaround that may do the trick. On the home page, you would still need to add the banner image as a logo to get the full image to render on both desktop and mobile. Then, for the rest of your pages, we can add some code to suppress the logo and only have the banner loading with the light blue background you currently have already.
With your permission, I'd like to see if I can set this up for you. It may not be perfect the first time around but I am glad to keep tweaking it until you are satisfied with how your site displays.
Is this something that you have already done in sitebuilder, but not published? I know that things look differently already but I'm not sure if that was you or Laura that made changes.
I will give you permission to try the changes on the back end, but please let me know here when you begin; I'll be around today.
I'm concerned because the banner image size I created for the desktop version is wider to accommodate large screens; I'm not sure if that affects converting to mobile. What size should I set up the banner image so that the entire image shows up on desktop and mobile?
Also please bear in mind that we did not want the height of the banner image to change across all pages. That was what was resolved with this first thread:
Thanks in advance.
The change I made and did not publish was moving your banner to the "Logo" area in your Style Designer. That is what impacted your other pages as the logo is automatically applied to all pages. We realize now that doesn't work for you but returning to the "Banner" setting means the responsive problem will return for mobile devices. Sanja understands what you want and believes she can help you to implement it but it will require some custom code and potentially some back and forth to ensure she helps you get the look you are after. She will follow up with you via direct email to confirm when she can begin testing the code with your permission.