Mike, could the problem be that you have simply not selected Responsive?

Step 2 Resolutions and Responsive Design

Once enabled you will be able to check the layout for each resolution in step 2 template structure and template content.

In preview you will be able to select each resolution to check with the colored bar indicating each resolution from mobile through tablet and desktop. You can do this by click or simply resize your browser window.

Hey, I have since moved my website back to desktop site. Until I can figure this out. I went and reconfigured each viewport to fit each screen perfectly. On the preview they look great. However when I look at the actual website on my phone and tablet, it just looks awful. Attached are what my website looks like on my phone. The first image is what initially displays. the second is what it looks like when i zoom out.

Please keep in mind that this is also extremely small on the mobile device. Not as large as depicted in the photos. I just turned my website back to Reponsive and updated it. Please look it over for yourself.

www.ModernEleganceCE.com

Hello Mike, as Esach has said, you need to check your header and footer in each viewport/breakpoint. Then in preview and at least chrome. Drag the right or left side of the screen back and forth and you'll see what happens at each breakpoint.

On your pages you may need more columns in a row for them to stack correctly at lower resolutions. Or create a breakline (in pro) to achieve the desired stacking results. Then you need to check each page as you did with the header/footer once again.

Skimming through the user guide and watching some videos can help also. Using the preview and other internal browers may not be exactly the same as going live but it will be close.

Start simple and experiment with each feature, then move to the next. Because WX5 uses the CSS grid for page content and it's semi-automatic (as screen sizes change) you may need to experiment with rows, columns, spacing, padding and margins. (Remember, an empty cell can cause problems.)

Kind Regards

Mike, if you create a folder in the home directory of your website on the host and then upload the whole site with responsive on into that folder we could offer advise at individual resolutions if you wish. Just tell us the folder name (eg test).

Thanks guys. I've looked and looked. I cannot find any videos on the matter. I checked every header and footer viewport and adjusted all of them accordingly. Like I said, in the preview section, all of my view ports look perfect and just how they should. But when I upload the site and check on my smart phone and tablet, the picture is very zoomed in. You can check yourself. I'll add my website for you to see in a host folder. If you look at the website from your mobile you'll see what I'm saying

Mike, you say you researched how to make a responsive website, does this mean you hand coded or used the functionality buit into WX5. If you hand coded I suspect WX5 is over-riding, misinterpreting your code. WX5 is designed to handle all resizing of content and cells and will allow you to control cell placement and order, etc.

Extra work will always be required in the header/footer and you can have a different image for each resolution if you like as controlled thru both template structure and template content. For the page to work correctly all content must be within the displayable area. You can see here that your content is way wider than the viewable area on a mobile.

What does your page layout look like?

Did you then take advantage of the responsive options to set cell breaks and cell order?

And did you use row formats to set image behind content?

If you would like some tailored advise you could go to step 5 export project and create an iwzip file (this is also the best possible backup of your project in case you should ever need it)

Use FTP in WX5 (or filezilla or similar if you prefer), copy it to your host directory and advise us of the filename. I recommend you contact me via my website http://www.esahc.com and use the contact form.

If you publish the filename here anyone can download your project, if doing this please remove or falsify your FTP login details in the project before creating the iwzip file (you are welcome to do this to me as well if you wish).

Where are you and which time zone are you in? (I am on east coast Australia, as I write this it is 2:53pm Sunday)

"I cannot find any videos on the matter" - Hello.In these paid video tutorials, you can find detailed information on creating a responsive website in WebSite X5. You will also find many other useful information.

Thank you esach I will send the file in the morning. I'm in the states. It's currently 230am on Sunday. I hopefully will get a better understanding when I send it to you through here. I hope to get this resolved

Thanks you guys for helping me solve this problem. Attached is the iwzip file with my project in it. I hope we can figure this problem out

sorry. it wont let me attach it esach. I will send over your email

Mike, I have received the project and it is mostly fixed. 95% of the problem was objects not totally within displayable header at various resolutions (Inc desktop).

Will get back to you soon.

You probably have already seen this, but if you have not.

https://www.websitex5.com/en/resources/blog/?tips-how-create-website-restaurant

https://helpcenter.websitex5.com/en/gallery/restaurants_public_houses_and_meeting_places

(Your in good hands as Esahc is being very kind)

Mike, 99% of your issues were caused by objects outside the viewable area at various resolutions in the header and footer.

all 8 handles of an object must be inside the viewable area of both header and footer

It is strongly recommended not to use tables unless they are designed to be no wider than 320px  (they do not scale). Use text box or adjacent cells with various objects to give absolute control.

When there are adjacent objects on a page, add breaks at the last resolution they look good in preview. In this example there is insufficient space to display adjacent cells nicely at 720px

To overcome the troublesome problems of layout on mobiles I always add 320px resolution (professional). Except for people with very old or very cheap phones, few will see the 320px version. The layout and content can be set for this resolution so it looks fine, but it can be tight so I frequently drop content at this lowest resolution.

BUT

Most users see 320-480 as their mobile resolution and here you have more room and better control of the layout.

Hi guys, Esahc has helped me so much. Unfortuantely, the problem is still occuring. We fixed all the problems that should fix it,  but the same thing occurs. I am using the responsive website design provided by wx5. I have made sure that each viewport is tailored to each breakpoint. I even did a hard preciewl with ctrl+preview. Esahc went and kindly adjusted each viewport for me on things I missed. All things everyone has suggested has been changed. But every time I visit my website via mobile or tablet. it is not correct. the first thing i see is my phone zoomed in the top left corner of the page. then when i zoom my phone out all of the way it is jhust a very far view of the mobile viewport. I really need this fixed so i can move along to the next part of my business. Hopefully someone has the solution, or hopefully esahc can help me resolve it haha. attached are some photos of what the mobile version looks like. the first 2 are he home page. the second 2 are a differnet page on my site. same problem. it zooms into the top left corner of my site.

Mike, I believe your issue is in the footer.

Go to step 2, template content.

Click on the Footer tab

At desktop and tablet resolution it appears fine, so go to the lowest resolutions and move content around so it is ONLY inside the visble area (remember, for every object all 8 handles must be within the displayable area)

Resize this object so it is small enough to fit inside viewable area

Hey Mike, what happened? I just checked your site in the four major browers and it's only showing the desktop. No breakpoints. (27" moniter) Dragging the left or right border in and out does nothing. Are you using a later version that has the css grid for page content? 

(Esahc, nice visual and detail, Dude!)

Looks like you have the latest version of pro. Something is not right here. Start a new project with a simple page, a few objects and couple of breakpoints. If the results are the same you may want to do a fresh install of the latest version of  X5 and not just an update, if not done already.

Hey Donald. Esahc and I have been working really hard on it. But it still is up and active for business so I changed it back to desktop version until we can fix it. I need my clients to be able to properly use it haha. But I had that idea. It's what I was going to do next with new website idea

Hey guys, I tried to remove all the header and footer objects to see if like esahc said, something was out of the viewing area. and with nothing inside the header or footer the same problem has occured. I believe something might be wrong with the page settings because my header and footer line up perfectly on a mobile device when i scroll down. but all the pages are pushed off to the right in the center of the page. Refer to the previous post with my photos in it.

Mike, you should still have the iwzip I returned. If you import that does the problem exist if you view it on your mobile?

OR

you could send me your current project again (complete with header and footer content) and I would be pleased to have a play.

Yes esahc. The very first thing I did when you sent the file to me was import it and publish it to the internet. Same problem. You should still have the iwzip file in our email feed

Mike, please re-import "my" version of your site, do a ctrl+preview and then a full upload (not new and changed). Assuming the footer hasn't become corrupted it will display fine. I suspect the partial upload failed to replace a file or 2.

Have you been doing a local preview of your site on your phone before upload? Does the local phone preview look correct??

I have uploaded your site to mine. https://esahc.com/mike/ please check it on your phone.

(It > En)  ... this site is not responsive: www.modernelegancece.com
...!... active SSL certificate; ... redirect >> https  inactive ...!...
... in order to evaluate the real tests, you must temporarily export to a sub-directory  the test site  with responsive settings, and post the LINK ...

.

ciao

.

Hey Mr Mike and Esahc, just checked the site posted and the approximate desktop results are:

Chrome down to 480, IE down to 240, FF and Edge down to 320. Looked all OK. On an old iphone 4s which stated this site would not work (because of the css grid) it still looked ok and the form appeared to be working. In portrait and landscape both, 320 x 480.  

Mike, I am sorry it took so long to identify the problem.

In case anyone else is watching this thread to see how it turned out, the problem "appears" to be a corrupted public_html folder. At the time of writing, when loaded into www.modernelegancece.com responsive fails for mobile view, but when loaded into www.modernelegancece.com/test everything works as it should.

Hopefully the hosting company can fix the issue.

... ... hadn't been told ...
... is not regular, something is wrong, ... shakes horizontally ...
bye Bye

.