My mobile site looks like crap! 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!

[Bettina1]

Hello,

i am new at weebly and disappionted how the mobile version of the colour content boxes look on ipad or laptops.

my problem: i use colour content boxes to create colomns, for example 3 boxes in a row. they contain text OR text + images. They look great on the desktop monitor and all have exactly the same lengths. if shown on laptop or ipad the lengths of the coloumns change completly although they have the same content. it looks quite awful. what can i do?

Thank you so much
Bettina

[Adam7]

Have you tried contacting the developer of the content color box app, @Bettina? They might have a suggestion on what you can do to change that on your mobile site.

[MrHempy]

The menu for my site looks tiny on mobile view and hard for people to use unless they can expand the view. Please help.

The menu for my site looks tiny on mobile view and hard for people to use unless they can expand the view.

[Bernadette3]

Are you using any third party code or apps on your website? It looks like you have your elements locked in columns on mobile display. Is it okay if we try to republish? 

[MrHempy]

I use only standard Weebly themes. I use a slider app and that is all. Yes please republish if you feel it can help.

[Adam7]

This is happening because you're using forwarding with masking, which will break some aspects of the mobile site. If you point the domain to Weebly and publish with it as your site address it will work properly: https://www.weebly.com/app/help/topics/how-to-use-a-domain-you-purchased-elsewhere

If you visit the site you're forwarding to on mobile you should see that it's working properly.

[MrHempy]

If we choose to reassign the A records on the Domain provider, what has to be changed with our Weebly site to accomodate that?

[Bernadette3]

You will need to set the site address from the Settings tab in the editor. The guide Adam posted has all the instructions. Just make sure to use the correct IP address for your site which is 199.34.228.67

[MrHempy]

Thanks for your help in resolving this part. We have setup the domain name A records pointing at the IP supplied for weebly and changed the site name and it works ...

However, we have a second domain name which was redirecting to our shopping cart page under the first site but it does not see the mobile rendering. We did change the second site redirect from oldsite.weebly.com/shop to newdomain.com/shop.

Is there some sort of mobile reference URL like m.domainname.com or do we need to do something else?

Details are as follows:

so we have www.hempothecary.com as the primary and this works now.

we also have www.cannopathy.com which points to www.hempothecary.com/shop.html but his is not rendering for the mobile devices.

[Adam7]

That will have the same issue because of the kind of forwarding you are using, although you should be able to set up a domain forward which forwards specifically to www.hempothecary.com/shop.html. A domain forward will actually send the visitor directly to hempothecary.com/shop.html rather than loading the site in a frameset.

[Nondu]

I wish I had seen this forum much sooner. I honestly would not have wasted my time.

This is really a bummer because I actually had no complaints with site builder (very beginner-friendly) and was quite pleased with the outcome of my site - until I saw the mobile view. In freaken 2019 where WE KNOW people basically do most things on mobile phones, it should be a NO BRAINER for desktop and mobile view to be the same, honestly!!!

I tried the column lock and that made things worse.

This issue on its own is enough for me to not recommend weebly to anyone else, unfortunately.

I am both mad and disappointed.

[Bernadette3]

Sorry to hear you are having trouble with your mobile performance. What is the name of the site and can you let us know what doesn't look right? Thanks!

[Nondu]

I have since unpublished the site - www.virtusidekick.weebly.com.

Does it need to be published for you to view it?

Well, I don't like the large font and the stacking. That has all been explained though in previous responses, so I guess nothing much can be done about that really but my biggest bother is how the whole header image is visible, whereas, on the desktop view, I had cropped it so it doesn't show the woman's hands.

[Bernadette3]

Yeah, the stacking is really not something you can get around without using third party apps. I'm a little confused why you would want the mobile to display exactly like the desktop, though. I have a pretty large phone, but would have a really hard time reading and clicking on your content if it was displaying in three columns. Is there a particular website that you are familiar with that has the same view on mobile as on desktop? Have you tried cropping your image before uploading to Weebly? 

[Nondu]

Well, I don't think everyone necessarily has large phones. Also, if content is too small you can zoom in to best suit your prefence (I do this with alot of other sites). With the way it set up on weebly though, the font is huuuuge, more so on smaller phones. Anyway, thank you for your assistance Bernadette. I'll figure out and decide how I proceed from here.

[Bernadette3]

You're welcome, Nondu. Sorry we weren't able to come up with a resolution, but if I find any other suggestions for you I'll make sure to post here or reach out to you via private message. 

[AboveAverage1]

How did you get it to look nice help me please 

[DenBle]

I am having a problem with the site looking good on desktop, but on mobile it loks like parts were arranged by a toddler.  The most problematic is the menu bar which came with the design.  On a phone instead of these being side by side they are randomly arranged on top of each other, near but bellow - looks terrible.  The address is www.blehacreative.com

[Bernadette3]

Hi @DenBle It looks like you've created a mid-page navigation menu using the Text element. There's too many characters (between text and spaces) to fit in one line on a smaller screen size. You could use something like the Hide app to change the display for smaller screens, though. Maybe for the mobile version you could list the navigation links vertically? 

[DenBle]

I used the already existing menu bar in one of the the set ups that was provided by Weebly.- all I did was change the color and change the letters and links in each word.  Can I set up different formats for mobile and PC?  How would I do that?  When I click on the Mobile view it says, "This is a responsive theme, mobile options do not apply."

[Adam7]

You could do something like that for content on your pages using the Hide app. With that app you can add content to one app element and have it show on wide screens, then use content formatted differently in a different app element and only have that show on small screens.