Mobile responsive design doesn't work with our banner

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Hi,

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.

Photo of Susie Morgan

Susie Morgan

  • 8 Posts
  • 0 Reply Likes

Posted 2 years ago

  • 1
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
I used the picture widget for my logo as this is responsive when viewed on a mobile device.
Photo of Jen

Jen

  • 206 Posts
  • 24 Reply Likes
Hello Susie,

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!

Photo of Susie Morgan

Susie Morgan

  • 8 Posts
  • 0 Reply Likes
Peter - Thanks for the idea but the picture widget isn't able to be used in place of the banner using the Heirloom template.

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?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Susie,

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">
 .yola_innermost_heading_wrap {
  padding-bottom: 66px;
}
</style>
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.
Photo of Susie Morgan

Susie Morgan

  • 8 Posts
  • 0 Reply Likes
Hi Laura,

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.
(Edited)
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Hi Susie
did you get my email I sent to you with suggestions?
Photo of Susie Morgan

Susie Morgan

  • 8 Posts
  • 0 Reply Likes
Hey Peter,

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. 
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
I suffered from the same problem with my responsive site and this solution corrected all my problems.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Peter,

I am curious as to what solution you used? 
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Hi Sanja

I am also using a responsive template and had the same problem. Because you can’t get access to the back end to remove the banner the next best thing was to reduce the size of the banner field.

What I did was go to the  style >designer and set the layout fields Basically you have now reduced the banner field to a single line, this will now allow you to drop a picture widget into this space and load your image, once this is done you can adjust the size of the image .

Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ah yes.. that is another great workaround. Thanks for sharing this. Hopefully, others will find this useful. For those who want to try this, please keep in mind that the navigation will always be above the Picture widget. 
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Plus this also gives you the ability to add a link url to the banner/image
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes

Hi Susie,

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.

(Edited)
Photo of Susie Morgan

Susie Morgan

  • 8 Posts
  • 0 Reply Likes
Hi Sanja,

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:
https://forum.yola.com/yola/topics/how-to-remove-header-text-without-automatically-affecting-banner-...

Thanks in advance.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Susie,

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.
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Why not use my workaround, requires no special code and takes 5 minutes!! and works
Photo of Susie Morgan

Susie Morgan

  • 8 Posts
  • 0 Reply Likes
Sounds good, Laura. I'll be on standby!