Section doesn't display properly on mobile version

[Ask_Sam]

Hi there,

I'm creating new pages and when I create a section using an image, it would resize to my desired dimension on the desktop version but not on the mobile. I viewed the page using my phone and it's the same, so it's not just a preview glitch.

Would appreciate some help to resolve this. I've been trying for hours but can't seem to make it work.

Many thanks!

[Adam7]

We don't provide a way right now to alter the display of a background image separately on mobile vs desktop. It's sometimes possible to alter it with a bit of CSS. Are you familiar with HTML and CSS? If not, a member of our Community might be able to help if you provide a link to the page of the site where you're having trouble.

[Ask_Sam]

Hi, Adam. For some reason, I didn't get a notification about your reply. This is really disappointing because why it looks good on desktop, the mobile version really sucks. Is there any way to fix this without dipping into CSS/HTML?

[Bernadette3]

Hi @Ask_Sam What is the name of your site? Maybe you can adjust the image ratio size to help the display issue. 

[Ask_Sam]

I've tried adjusting the image many times. It only affects the desktop version. Mobile version remains the same, which is pretty much cropped on top and at the bottom therefore smaller in height than the desktop version.

It doesn't matter if I use the section only for a background image (like I did this time) or fill it in with image and/or text. I've tried it different ways but the height stays the same in the mobile version such that the entire content of the section is not displayed.

Weebly really needs to fix this, IMO. 

My site's name is subtleawakening. If you view it on your phone, you'll see what I mean.

[Adam7]

One thing you could try is using the Hide app with a spacer element in it:

https://www.weebly.com/app-center/hide

If you set the app element to only display on smaller screens, it will make the spacer only show on mobile devices.

[ALCOlivia]

This doesn't apply to sections though so if you have an image as the background with text over it, this solution doesn't work. This is so frustrating... So many times have had to compromise design that looks great on the desktop just so it would not look like total crap on a phone. 

[Bernadette3]

Would you be able to edit the image to include the text before uploading as a background image? 

[leugim7]

Can you show how to solve this issue using the HTML / CSS code you mentioned?

[Adam7]

Can you post a link to the page of your site where you are having trouble, @leugim7? If it's possible to solve it that way then it would help the members of our site to see the page.

[leugim7]

Hi Adam,

This is the link: https://www.niceprints.us/prints.html

If I see it on desktop it looks great... if I see it on mobile it looks bad.

The original image is 1920W X 775H

Thanks.

[Adam7]

One thing you could try is using the Hide app with that section. Add a spacer to it and set it to only display on smaller screens. You can adjust the height of the spacer so it affects how the background image displays on mobile.

[SEBR]

Did you ever get this figured out?  Because I am having the same problem!!

[Bernadette3]

There's a few different users on this post, @SEBR. What is the exact problem you are having, and can you post a link to the affected page? 

[SEBR]

Hello Bernadette,

The problem is that I created a site using the Marisa theme and the whole first section (an image) gets cut off except for a very narrow strip at the top when it is viewed on a mobile device.  I do not know how to fix this.  Here is a link to the site:

sarahrutledgevoice.com

Thank you for any help!

[Adam7]

One thing you could do is use the hide app, add a hide element to the page, set it to display only on small screens, then add a spacer element to it. That should make it so the spacer is only used on mobile devices and makes the section taller.