From your experience, before I get started with responsive, would this be the way to go to avoid spending too much time fixing elements for responsive design? Would it be easier if I just created simpler mobile version alternative pages instead?
Then I noticed my inputs in mobile version have different names(appended 2). So mobile and desktop version are sharing the same components. The only option is to create updater queries from scratch for mobile versions? This will be nightmare to create, because I have number of text inputs as well as maintain it. All I wanted is to have container to look good on desktop and to snap to edges on mobile. If I leave only desktop, then I have a tiny controller on mobile screen. Otherwise I have giant container on desktop.
Hey @Pablo!
Happy to help here! I think what likely happened is that you made a distinct copy of your desktop container and pasted a separate instance of them.
If you're looking to have the same container component (and child components) show up on both versions, you can select the container (and individual child components) in your desktop version and toggle "Show on mobile"
1810880 121 KB
You may need to delete the copy of all of these components currently shown on mobile beforehand.
Hope this helps, let me know if you have any questions!
There are a few sites that will only show up as mobile versions on my Brave desktop browser. There seems to be no setting to force the desktop version of the webpage to load. I am using Brave on OSX and one of the sites is this one:
Hi
Thanks for the reply. I do have some extensions. I have the google docs extension as well as zotero, both of which I need. I am not sure if this is a good test but I disabled both, right clicked and cleared the CSS rules as you stated, cleared the cache, and restarted the browser. I still get the mobile version of that site.
The ideal way to test a website is to test it on a real device. This helps developers monitor websites on mobile browsers that are installed on real Android and iOS devices. By doing so, QAs can evaluate how a website performs across multiple mobile devices and browsers in the real world.
QAs can test on any real Android or iOS mobile device directly from their browser. They do not have to download any browsers or emulators. To open a mobile version of a website on Chrome, QAs can log in, select the device-browser-OS combination and start testing. The image above represents a live testing session (Chrome Browser Testing on Samsung S10+) on BrowserStack.
First option is to make Responsive Website, which aligns itself depending on device screen size. For example, if your screen width is lower than 400px you can act like it is mobile, and arrange your website. Like in this image. You can also check this website, try to change your browser size, make it smaller :
Second option is to use some script code to detect if the device is mobile(if it is mobile, which OS, which browser it uses etc.) and redirect users to other mobile site. For example you can deploy a mobile site in a subdomain like this
I'm struggling to find a way to remove the negative/blank space on the mobile view of my website. Viewing on desktop the design is how I would like it, swithcing to a mobile view you'll see a lot of negative white space between my header, and the image slideshow. I've been hunting around the design section of the edit menu, but cannot find a way to remove this space, which doesn't affect the design of the desktop version.
Hi, I am having the same issue with extra negative space on the mobile only view, but unfortunately this code is not working for my site on mobile. Below is my site and password. Could you help me solve this?
I have tried variations of this code on my site but nothing seems to work. I really want to remove the blank space at the top of the page just after the menu, and further down where the video is, both on the mobile view.
Hi there, I have a similar problem. I am trying to use the grid simple to display a set of different images. It works fine on desktop, but on mobile there are large spaces. Is there any help anyone can provide?
None of the codes provided are working for me when trying to eliminate the blank space on the mobile view of my homepage. Provided is a screenshot of my mobile view plus the existing code I'm using (courtesy of tuanphan in another thread - thanks for that!) to scale my background graphics down to fit the mobile screen. I love that the pictures fit the screen now, but the big block of dead space underneath is undesirable, and none of the codes I've seen have been able to eliminate the dead space. Please help!
Editing this website for a friend, and getting very frustrated with the dead space that I can't get rid of. I wish I could edit the mobile view to optimize my graphics for mobile without impacting the desktop view...
I see the same thing! My waypoints are showing on the initial/staring mobile view (Android) but not the route. When I switch to desktop, then the route appears but it's clunky and the initial sidebar blocks the map which creates a second confusing set of instructions for viewers.
Add one more to the list for tripping on this issue. My shared course clearly shows on the desktop version of MapShare, but my mobile phone (android) defaults to a mobile version of MapShare and does not show the course. If I force it to switch to the desktop version, the course is there.
Hello, this is working as intended for the mobile version. As a workaround, customers can toggle the browser on their mobile device to Desktop Mode which should allow the routes to display in addition to tracks.
in Chrome and Firefox ... On my Android ... both mobile and desktop mode is not showing my tracks... I have not tried to show routes .. like its only currently showing a blue dot on current location... but in Desktop I can see the collection of tracks that I have shared .. properly .. I cannot reconcile this even using desktop mode on multiple devices.
All of my problem stated in subject...
When I change view of the site from desktop to mobile, all I see is an empty phone picture.
Phone with absolutely nothing inside phone's screen.
And right part of menu's with desighn for mobile options don't work too.
I tried to make it in chromium and in firefox and it don`t work in both browsers..
Hey @slingo! It isn't possible right now to edit the mobile site separately from the desktop site. Also, the mobile preview will really only show something when you're using an older non-responsive, theme. If you're using a responsive theme, it'll just adjust to smaller screensizes.
This is perplexing. The site is editied on a desktop, and then automatically reformatted for mobile, which is where the vast majority of people (my people at least) will be viewing it. And it looks terrible, with font sizes all over the place. If I had known this I would have gone elsewhere. It is a serious oversight, can it be so hard to remedy?!?!
Font sizes should be consistent on a mobile device just like on a desktop computer, except sized more appropriately for mobile. Are you changing the sizes of fonts with the text editing toolbar, or using text pasted in from somewhere else?
It'd really just be easier to edit the mobile view. I don't understand why I can't. At the very least I should be able to adjust the font in mobile view without it corrupting the view for desktop. I spent the last month on this website thinking it'd be as easy as it is on Wix to adjust the mobile view but it seems that option isn't even availble.
I would recommend using the Hide app, that way you can specifically control everything for both separately. Basically you add one Hide element the page and put everything for desktop in it and set it to display on large screens. Then you add a second hide element set to display only on small screens, and put content in that like you want it to look on mobile.
Thanks for reaching out, @sheller2000 It is not possible to edit the mobile view separately. If you are using the original Weebly editor you can try using the Hide app to display different content depending on the screen size.
Okay, so I love my desktop version. Its simple. Its clean. Its easy to navigate. I will likely add more to my homepage eventually, but for now, I like it just the way it is. However, the mobile version, not so much!
1. The image banner. LOVE it on the desktop. But not so much on a mobile version. I have set to stack so it will be the image then the text under it (instead of text over the image like on the desktop version.) I want the background to be white. But the text is white. So when you go on the mobile site, you wont be able to see the text because both the background and text is white. Is there a solution to this?
f448fe82f3