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!

[V-V]

Hi Weebly Community & Moderators,

I would greatly appreciate some help on my website; specifically the mobile site. Currently, when opening my website on any mobile device, all my background sections all look horrible as they don't shrink. All the buttons and formatting also all go out of whack.

I have downloaded the hide app, but I don't think this helps with backgrounds. My website is www.shumswatches.com.

Many thanks,

V-V

[Adam7]

It can be a little tricky at times getting background images to do what you want across all devices. The most successful I've seen are those which don't have any specific focal points and look good whichever part of the image is showing. That said, I can understand wanting to use an image which has a particular part that you want showing all the time. 

You might be able to do that with some theme customization if you are familiar with CSS and HTML. If you aren't familiar with those there are other members of the Community who might be able to help, though.

[fjsarmiento]

Hello there,

I would love some help with my website: www.fjsarmiento.com

First I searched why the arrangement of my site looked so random on mobile version and found that I needed to remove <meta name="viewport" content="width=device-width, initial-scale=1.0;"> from my header code.  That seemed to have solved the arrangement and overall sizing issues.

However, I switched from a TEXT logo to an IMAGE logo and now it looks way too small on the mobile version. I've tried looking it up on other forum posts but none of the style codes suggested are making an impact.

Examples I found that didn't work for my header code with the "style" tag:

@media screen and (max-width: 992px){
#logo img {
    max-height: 80px !important;
}
.banner-wrap {
padding-top: 80px !important;
}
}
@media screen and (max-width: 767px) {
#logo img {
    max-height: 60px !important;
}
.banner-wrap {
padding-top: 60px !important;
}
}
@media screen and (max-width: 480px) {
#logo img {
    max-height: 40px !important;
}
.banner-wrap {
padding-top: 40px !important;
}
}

Can someone help me size my logo much larger on the mobile version and can I also get rid of my hamburger menu navigation button at the top left corner of the mobile version and use the same top buttons that you see on the desktop version?  Would greatly appreciate your help, thank you!