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!

[Queso]

Hey there PopCulArt! Sorry the stacking hasn't been displaying as you'd prefer. You have some excellent ideas here that may go well in our Vote on Features page, but where controlling the stacking is concerned, you may want to look into the Column Lock app in the App Center. That will help ensure the horizontal image arrangement stays that way at any size.

[PopCulArt]

Thanks for the heads-up! While not an absolute perfect solution, it is a vast improvement, albeit a lot of additional work for site designers. However, I do feel that this Column Lock add-on should be a default feature and not an optional extra, with new users given a pop-up tutorial upon starting a new site advising them that they should utilise the Column Lock when designing their site to ensure that their site will look correct when viewed on a mobile device.

Browsing the forums here, I see A LOT of users having the same issue with their so-called responsive themes looking a mess on mobile browsers, and I think that more could be done by Weebly to promote the Column Lock feature so that more designers can make their websites look like how they imagine.

In retrospect, had I known that my site would look like crap on a mobile, and also known about this add-on before I started constructing the site, it would have saved me a lot of hard work and effort in the long-run!

TO ANY USERS LOOKING FOR A MOBILE SOLUTION - I highly recommend using the Column Lock add-on to make your website appear properly on a mobile device! It's no substiture for a Desktop / Mobile Toggle, but at least it gives you some control over how your site will look on mobile phones and tablets. It's not perfect by a long-shot, but it is an adequate compromise!

[DNA1]

I'm having a similar problem.  I cannot publish until I can find a way to NOT show uncroped images on mobile devices.  I've spent the afternoon sampling a dozen themes and they all look fine in DeskTop but, after I choose them, selecting the mobile view shows a full photo instead of the limited banner strip they need to see.

So how do I:

1. See the desktop version in "sample" mode without having to choose it first?

2. Find the ColumnLock add-on to see if it helps?  

3. Check each theme again to see which one looks best?

4. Modify a mobile version to look the way it must?

[Queso]

Hello DNA!

Usually, a mobile view will still try to show as much of the header as possible. What particular part of the image were you trying to have show?

[Shez85]

I'm having a problem with the main image on my home page. This is the first image that appear when the site is loaded and it looks great on desktop. However on mobile only a strip across of the middle of the image appears. I dont think column lock applies here, can you advise how I can fix this? Thanks.

[Adam7 · Accepted solution]

You may want to check out the Column Lock app in the Weebly App Center, as that app will let you keep elements in columns even on smaller screens.

Another suggestion is to look at how you have your content organized into columns. On a small screen, content in one column will stack on top of the content in the column to the right of it. Sometimes you need to move content into separate columns elements, that way you have more than one row of columns elements and it stacks just the first element, then the next, and so on.

[Shez85]

www.kickboxfit.net

Thanks Adam

[Queso]

Hello Shez! It looks like you have it set up as a background image, which displays a bit differently. Have you been able to try adding it on as part of an Image element? That may help keep everything in easy view.

[Shez85]

That sorted it. Thanks so much Queso!

[CR151]

Hello,

I bought a Weebly Pro Site (£100) and I want to remove the 'Create a free website with Weebly' footer link from the bottom of my site  it says that 'this feature is part of an upgraded plan'. I thought my plan meant that I'm paying for my website and could remove this message. Can you please help me? What does this plan include? Many thanks 

[CR151]

I bought a Weebly Pro Site (£100) and I want to remove the 'Create a free website with Weebly' footer link from the bottom of my site  it says that 'this feature is part of an upgraded plan'. I thought my plan meant that I'm paying for my website and could remove this message. Can you please help me? What does this plan include?  @Adam 

Many thanks

[Adam7]

You can remove that since you upgraded, @CR15. Click on your footer in the editor, and it should load it in an overlay for editing. Once it does that, just delete the elements in the footer like any regular elements, then save your footer.

[Xpressivedesign]

Hi my mobile view is perfect but my desktop view cuts off my logo im placing it in my main banner because it looks like crap on both mobile and desktop view with the header.. ive done everything possible to get the mobile view to match the desktop view.. switchin the layout and the sizes in customization but its still terrible

[Adam7]

One thing you could do is edit your original image and add a bit more black space to the top and bottom, @Xpressivedesign.

[digi-biz-wiz]

Couldn't agree more!!! Total cr@p. Spent days and days designing for a client (Weebly their choice not mine) and was using the Weeebly "mobile view" to assist me...but forgot I should have been checking it on a mobile device as well. Because when you DO that the truth comes out.

Very poor mis-information as far as I'm concerned.

Am now looking for a solution POSSIBLY made availalble by a Theme design company which has realised there's money to be made designing PROPER MOBILE OPTIMISED website themes (which hopefully woud work on Weebly).

Not happy!!!

[Adam7]

Which parts of the site you designed are not looking like you expect, @digi-biz-wiz?

[sierracleaning]

All pages in mobile view have different size fonts, however the fonts are more uniform when viewed in a desktop. Can you please tell me how to fix that? sierracleaningservicesinc.com

[Adam7]

Could you let me know a specific page where you see inconsistent sizes, @sierracleaning? I'm not sure which fonts I should be comparing on your mobile site.

[digi-biz-wiz]

Couldn't agree more!!! Total disaster.  Spent days and days designing for a client (Weebly their choice not mine) and was using the Weeebly "mobile view" to assist me...but forgot I should have been checking it on a mobile device as well. Because when you DO that the truth comes out.

Very poor mis-information as far as I'm concerned.

Am now looking for a solution POSSIBLY made availalble by a Theme design company which has realised there's money to be made designing PROPER MOBILE OPTIMISED website themes (which hopefully woud work on Weebly).

Not happy!!!

[nfoster]

I installed the column lock app.  It says it's working with my website.   It doesn't seem to fix anything on the mobile version.  I'm not sure how else to research this?