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!

[Susirich]

Yay! Thank you, the site looks perfect now And thanks for the compliment.

[Adam7]

Nice job, @Susirich!

[mmenefee]

I have a similar issue, except with mine, there are no mobile options because it's supposedly "responsive." It is clearly not working right. The large black box under the background image on mobile makes it impossible to read the purple text that works just fine as designed on a lighter background. I did not put the black box in there, don't know where it's coming from, and just want it to go away like it does on desktop. Please assist. Our primary client base will be on mobile. 

smctransfer.net

[Adam7]

That black area is happening because you have a spacer element in your header that is making the header taller than your background image. Try reducing the height of that element a lot - that should cut out the black space.

[mmenefee]

I have not only reduced the height of the spacer, I even took one out entirely. The only spacer left is to keep the text and "Get a Quote" button to the left instead of stretching all the way across. Even that spacer has been made as short as possible. Still there is a frustrating black box under the background image on mobile.

[Bernadette3]

Hi @mmenefee Can you please log into the editor and click Pages>copyHome. The black bar should be gone from the bottom of the picture now. To achieve this on the home page you created navigate back to the original home page and click on the black bar. You will see a blue circle in the middle of the page which you can hold and drag to make the header area smaller. Hope this helps!

[mmenefee]

@BernadetteThank you. In the future, I would appreciate just being told what to try, rather than having you edit my site - that makes me very uncomfortable. It also has not fixed the issue on mobile - the black box remains there, even after I performed the action you suggested and published the site.

[Bernadette3]

My apologies. Support will often make copies of a page if something needs to be tested, and we would never make a change that would affect the live site or your current edited pages.

If the black background is still showing up even after adjusting the size of the header you can check the theme settings. For the theme you are on you have the option of choosing a light or dark background. 

[starswell]

I just switched my theme because the logo needed to move, and now the mobile site with all the new themes I've tried is not showing the drop down menu options.  For example, when I click on 'services' the drop down menu should appear and give me 4 options.  What happens on the mobile site is no drop down menu, and it directs to one page automatically (the first option from the drop down menu) and also does not display the images.  I can't even find the other pages at all.  Help Please

[Adam7]

What mobile device are you seeing that with, @starswell?

[JCZ]

Awesome!, that app is just what i needed.

Thanks!!

J.

[Bob65]

Same here! Weebly donot want to know.

[Bernadette3]

Hey @nfoster and @Bob65 can you post links to your website so we can take a look? Thanks!

[nfoster]

www.sacredmariposa.com

and

www.amourcottage.com

(both pointing to the same site)

I can't figure out how to lock the pictures into place, the whole site rapidly changes sizes repeatedly on a cell phone, so it is pretty much useless unless someone is on a computer

[Adam7]

That behavior is pretty much what you would see with any modern website design, where content will stack and grow larger on a mobile device so it's easy to read and look at.  There are ways of preventing that, though that can cause Google to lower the ranking of your site in mobile searches because it views the site as less accessible on mobile devices. 

[Js007]

I'm dealing with this message on the right when selecting mobile view.."This is a responsive theme, mobile options do not apply." The problem I'm having is, the image header which is 2000x452 does not resize, so you can't read the logo. All you see is the middle of the text which is the "FAST" in giant letters that take up half the phone screen.What you're suppose to see is "NTHEFASTLANE".

I used Wordpress before here, the header immediately compressed nicely with mobile and tablet view. You should incorporate that for sure, tablets are actually starting to rise in the android/ios website view world.

Can you give me an idea of what I can fiddle with to get this to mobile responsive state?

One more question, when I put in the "Page Permalink Page's URL" ex: "Turbo", it automatically errors with, "This permalink contains invalid characters." It then immediately removes the uppercase "T" and renews it like this "turbo". The lower case "t" is going to cause me to have hundreds of 301 redirects because thoes links are marketed everywhere. Anyway this is a bug? And is ok to have a Capital letter in a permalink url?

[Bernadette3]

Hi @Js007. Can you post a link to your page so we can take a look at the mobile site? As far as I know the url will be all lower case letters, but you can submit a ticket to support and the agent can verify with tech support team if this is a bug or not. https://hc.weebly.com/hc/en-us/requests/new

[Js007]

My site is not published. I wont be publishing for a while. I imagine since you're a moderator, you can look into this matter. Link: https://nthefastlane.weebly.com/

[emporium321]

My site also looks like crap on mobile- the tiny title is giant, you cant even see the menu header, and everything is out of proportion. Ugh, what a waste of time

site is www.emporium32.com

[Bernadette3]

I don't think it looks too bad. If you want the text to be smaller on mobile it may help to make the site title an image and use it as a logo instead. When you say menu header are you talking about the three lines that opens the navigation? 

[Natasha31]

I'm inclined to agree with you, and this is two years later.