How do I make my site look better on mobile devices?

[PopCulArt]

[Note: The title of this thread has been edited by a moderator.]

I recently created a website with Weebly. I must have spent a good 100+ hours fiddling around with it over the course of several weeks to get it to look exactly as I wanted. I then published my site. However, when checking it on a mobile device, I was ABSOLUTELY DISGUSTED by the horrible mess that I saw on my mobile browser!

My site, for reference: http://www.popculart.com

The theme I chose was listed as "Responsive", and as such does not have a mobile override toggle. For the most part, it is. However, the way that the responsive mobile version of the site resizes blocks and images is not ideal. I understand that things need to be adjusted for smaller, vertical screens, but the way that the software does this is attrocious! For example, at the very tp of my landing page I have six vertical images in a row, but on the mobile browser these images are displayed as full-screen in a column! Ideally I would expect the images to be split 2x2 or 3x3, but displaying them the way that it does just looks terrible! The rest of my pages are no better, with the only page displaying reasonably well being the Contact Form, where I deliberately positioned it in the central column of the page.

To make matters worse, there appears to be no way to offer site visitors the option to display a "Desktop Version" of the site, and attempting to request such a thing via the mobile browser is ineffective. While not an ideal solution for mobile users, I would much prefer that mobile visitors see the webpage as I designed it rather than the disgraceful formatting that presents itself by default!

For a service that we pay good money to utilise, Weebly do not offer us adequate options to: A) offer a toggle between desktop and mobile views; B) opt-out of displaying a mobile view on responsive themes; and C) adjust certain mobile parameters via the CSS

Doing some research, it seems that this is perhaps the most complained about issue with Weebly at the moment. Having a mobile-optimised version of the site is a good thing, but it seems to be very difficult to be able to design a site that looks good on both PC and mobile devices. At the very least we should be given the option to opt-out if we feel that the mobile view is not working for our websites, but ideally we need more control over how certain aspects look when viewed on a mobile device, and a separate CSS file dedicated to editing the look of the mobile version

In this instance, I feel that "Responsive" does not live up to its name!

[#2]

This is so disappointing! I am not a tech and didn't realize what a problem this was going to be. I feel really let down by weebly. Bummer. My site looks horrible on a mobile. Of course this feature should be a default, and of course newbies should be warned. Weebly specifically goes after the newbie market and therefore - bummer.

[Bernadette3]

Sorry to hear that. Can you post a link to your site? There may be some tools you can use to help the way it shows on mobile. 

[AndyPhillips]

Thanks this is helping a bit, but the mobile site still doesn't work like it should on so many things.

[Bernadette3]

Hi @AndyPhillips Is there anything in particular you are not liking about the mobile site? 

[AndyPhillips]

my web site is rp-racing.co.uk. Columnlock has helped a bit on my testimonials page and others.

I'll have to remake the whole partners page using the same method but having to divide each statement into a separate "row" is a bit of a nightmare.

I can't get slideshows to show on android, so my home page is pretty much blank on a phone. 

Not an Android problem but the web site also doesn't size out  a computer screen so its stays very narrow is there a way of making it autosize to use the screen width and look nicer?

Appreciate any help!

Thanks

[taosecokidsclub]

Hey I know this is late but I just wanted to say that I had the same issue and you helped me so much! I'm usuing collumn lock now and it really really helps! Thank you SO much. It's pretty annoying how the theme is "page responsive". I think it is stupid. Like you should be able to have the option to change things up the way you like it. 

I'm using Weebly because I don't have enough money for a domain so i have a subdomain right now. I would use Wix.com because their mobile version is incredibly flexible, however their subdomain link is way too complicated and long, it's not practical for my viewers to remember that long of a name. So I'm forced to go with Weebly. SO thank you so so so much for figuring this out!!! It's really extremly helpful for me

[wenerska]

I've had the same problem, but the column lock solution didn't work for me. I've just applied for a couple of jobs and I don't want the creative directors checking my website on the go and dismissing the crappy mobile portfolio. 

[Queso]

Hello wenerska! Have you been able to try dragging the Column Lock element to the top of the section as well? It looks like some of the elements aren't covered by the current placements.

[mbd-123]

I'm also have an issue with my image galleries in Mobile for marvelousbydesign.com/projects. Some, like the 800J Lofts project, are enlarging and showing as one column (which I want) and most aren't. I've re-added the first gallery (855 Brannan) with no luck.

Secondary issue is when I click to enlarge and navigate through, the images appear small and you can't pinch to zoom or anything.

Help - thanks!

[Adam7]

Hmm.. I see what you mean, @mbd-123. Were these Galleries added at different times to the site, or all added recently?

[CR151]

I have also problems with my website on my mobile. The fonts looks really big! Also, there are big spaces between the headlines and images. It's clearly not compatible with a mobile view. In my desktop version, images/text are too separated and don't look good. Also, I can't add social icons (e.g., twitter). I'm not getting any support from Weebly and at this point I'm regresting having spent so much moeny for this wepage domain.

[Adam7]

What site are you having trouble with , @CR15?

[CR151]

many thanks!

[vicky_fp]

Hi there - 

I've just built my website at fringewivesclub.com and I'm trying to optimise it for mobile. It's a responsive theme but nothing seems to be shrinking down for mobile view, particularly on the home page. I've tried the column lock app but it's not useful for my formatting.

Any help greatly appreciated.

Vicky

[Adam7]

Your site seems to be doing what I would expect it to do on mobile, @vicky_fp. Content stacks on top of itself and tries to display as large as it can for easy readability. Was there something else you expected it to do instead?

[vicky_fp]

Ah okay, thanks Adam. I expected that a responsive theme would mean that the text/images would shrink to fit - for example on www.fringewivesclub.com/the-wives.html - and particularly the home page as you can only see one corner of the background image. Is there a different way I should be formatting it for this to happen?

Thanks for your help!

[Adam7]

Background images are a little different, but here's something you can do to make more of one show on mobile:

1. Install the Hide app from the App Center on your site: https://www.weebly.com/app-center/hide?ref=ac-search

2. Add the Hide element to your header section, and set it to only display on small screens

3. Add a spacer element into the hide element

That should make the header larger, but only on mobile so it shows more of the image.

[Susirich]

My images have this weird irregular darker box around in the mobile- optimized version. How do I get rid of it?  

Also, my destop version has white background which I prefer and looks fine. Is there a way to change the mobile bkdg to white?

[Bernadette3]

Hey @Susirich Can you post your site so we can take a look?

[Susirich]

Sure thing  

http://www.susischaefer.com

[Bernadette3]

Thanks! So it looks like you are on one of our older themes that allows you to choose a theme for mobile. Log into the editor and click on the computer icon at the top of the page. Then switch the view to mobile. You will see a sidebar on the right and the option to change theme. 

Also, your illustrations are adorable!