Index Page Size

[BarryZ]

Hello

Having a problem and do not know how to solve this. On this website, we have 10 pages. All pages display a width of 800, EXCEPT for the index page. The index page displays at 360 wide. I am not using any responsive page settings n any page. This only affects the index page.

[Pablo]

You will need to be more specific.
What exactly did you do?
What are your settings?
Do you have a demo?

[crispy68]

It's hard to say. Are you sure the settings for the index page are the same as the others? Do you have a project file you can share so we can see all your settings?

[BaconFries]

On this website, we have 10 pages

On what website? are you talking about https://www.33alerts.com/ as already mentioned a demo project is preferable this being a copy (basic) of your project the .wbs as it makes is easier to check rather than a url.as the .wbs can be load into the software instead of having to view the source html.

[BarryZ]

The revised website is not live because of this problem.

Can I upload the source file of the index page and another page? How do I upload these files? Not seeing any option to upload.

[Pablo]

For information about how to share a DEMO project file, please see this FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

[BarryZ]

Yes, I have a demo project. How do I upload the wbs file here? Not seeing any options to upload files.

[BarryZ]

Pablo—thank you. Here is the link to the wbs "zip" file. All images are included. Only 4 pages are included. Also included is a pdf file that displays the view when the index page is opened in WYSIWYG and how the index page displays in WYSIWYG web view.

https://drive.google.com/file/d/1J3bZ1u ... sp=sharing

[BaconFries]

Then upload your project (.wbs) to your website or another public server and include the link in your post

Here is the link to the wbs "zip" file

Sorry but this is not what was asked for it is the .wbs file itself. What you have provided would be just like viewing the html of the page. It doesn't show any of the settings you made in the software itself. Can you just provided the .wbs file this way it can be directly opened in the software and be viewed. Example what to look for "yourproject.wbs"

The project file is the first item at the top you see to the right in the Site Manager you will have named it differently than Untitled1 it is the file we need.

[BarryZ]

The first line is "33Alers-01_Project.wbs"
Is this what you are asking for?
https://drive.google.com/file/d/1_4VP7C ... sp=sharing

[Pablo]

The page displays correct for me.
However, there is an error in your settings which may break the page layout.

In Page Properties -> SEO -> Canonical URL, you have entered HTML code. This is not correct.
This should be a URL only.

[BarryZ]

Was the file that I provided the file that you need?

[BarryZ]

Okay, I replaced
<link href="https://www.33alerts.com" rel="canonical">
with
<link href="https://www.33alerts.com"
Saved it. The WYSIYG preview still shows the small width for the index page.

What am I doingwrong here?

[BarryZ]

If I create a new page that is 900 px wide, name it any name (e.g., page-01), add a box that measures 796 px wide, and add an image. This page in View moe displays properly. Looks great. If I rename this page to "index", then this page in View mode displays a smaller width.
Why is this happening?
How do I fix this?

[BarryZ]

i created a new website. Added only two pages -- index and page-01. Pahge-01 displays as expected,and the index page displays with the shortened width.

[Pablo]

Okay, I replaced
<link href="https://www.33alerts.com" rel="canonical">
with
<link href="https://www.33alerts.com"

This is not correct. There should not be any HTML code. just the URL:
https://www.33alerts.com

Also, for some reason you have add this code in Page HTML

Code: Select all

<script src="index.js?v=34"></script>

This should be removed, because the software already generates that code.

There may be other conflicts in your settings but first you will have the basics right.
Because if you add invalid custom code to the page then this will affect the behavior of the page.

[AliGW]

i created a new website. Added only two pages -- index and page-01. Pahge-01 displays as expected,and the index page displays with the shortened width.

Could you please share this test site (the .wbs file) with us? I cannot replicate your issue here from scratch.

[BarryZ]

Is there hidden code that WYSIWYG adds to the index.html page? Or is there a "special properties" section for the index.html page?

[BarryZ]

I did not manually add any HTML code. This is what WYSIWYG automatically added. I created a new website project, and this was auto-added to the the index.html page in this new website.

And when I preview this page, the page displays with the smaller width as I have reported.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 19 - https://www.wysiwygwebbuilder.com">
<link href="Website_test_01.css?v=0" rel="stylesheet">
<link href="page-02.css?v=0" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="wb_Shape1">
<img src="images/img0001.png" id="Shape1" alt="" width="930" height="51"></div>
</div>
</body>
</html>

[crispy68]

I downloaded your file and it is not clear to me your issue.

The index page only has the default view set at 800px wide. When I preview this, it looks correct. Keep in mind anything below 800px is not going to look good on mobile and may cause horizontal scrollbars.

Your master_header page had the default set to 800 and then you added a breakpoint at 800. Why? this is not needed. Also, the breakpoints on your pages should match the breakpoints on your master page if you are going to use them. I see the 'How it Works' page has a 320px breakpoint which doesn't match your master page. You want to be consistent page to page.

[Pablo]

I did not manually add any HTML code.

The code I am referring to in the project you have shared was not added automatically by the software. You have added this yourself via Page HTML.

[BarryZ]

Here is a new website with only two pages. I added no code. I added two images to each page. This is about as stock (plain vanilla) as I know how to make a website. When I preview the site using WYSIWYG in Google Chrome, page1 displays properly with the correct size. The index page displays the narrower width. I am absolutely stumped as to what is causing this problem. This started about one month ago.

At first, I thought it was a setting in the website or the browser, but since this smaller width index page also happens in a new website project, it points to either a "bug" in WYSIWYG, or a setting in WYSIWYG, or a corrupt file in WYSIWYG. I am using Version 19.0.4. I've been using WYSIWYG since version 14. I'd give my skill level a "6". I truly enjoy using WYSIWYG and Palo has created a wonderful product. I'm greatful for your help.

I've been asked to create a "DEMO" project. Sorry, but my link below is all I know how to do. If this is not a PROJECT Demo, please share how to create a DEMO project, and I will follow your instructions.

https://drive.google.com/file/d/1OsS4Gq ... sp=sharing
This is a zip file and it contains the entire two-page website.

[BarryZ]

The HTML code that I shared, I do not recall ever adding this code. Tell me where to look for the code you are referencing.

[Pablo]

I do not see the issue with project you have shared. For me, it displays correctly as far as I can tell. The page is 800 pixels wide, as you have designed it.
What do you see?

The HTML code that I shared, I do not recall ever adding this code.

Page -> Page HTML -> Between head tags.

[crispy68]

Your download only contains a text file and a folder with an image. There is no .wbs project file in there. The text file is just the html code. Please provide the actual .wbs file for the project.

[BarryZ]

Please try now.
https://drive.google.com/file/d/1Kspq-5 ... sp=sharing

[Pablo]

I do not see any issues with the project.
What do you see?

[crispy68]

yeah, i don't see anything either. Page 1 and index page look like it does in the workspace. I don't know what you mean by that the index page displays a narrower width. It looks just like in the workspace to me.

So when I preview either page, what should I be looking for exactly? Can you describe what you are seeing?

[BarryZ]

Please see this pdf file. This shows what I am seeing with the index page.

https://drive.google.com/file/d/1aiV_Jg ... sp=sharing

[crispy68]

In the last project file you sent, this is what I see in the workspace for the index page compared to the published page (viewed in Chrome):



It looks the same.


In the previous demo you sent, it looks the same also:




And here is the index page compared to the How it Works page when previewed:



Same size as each other.

Have you tried previewing in other browsers? Is your browser showing at 100% (not zoomed)?

[BarryZ]

Change the zoom
crispy68 -- THANK YOU.

My next questions are:
Is the browser zoom setting set and saved when using the WYSIWYG preview mode?
Is the Zoom browser setting saved for each page?
If I use a reduced zoom setting when previewing the index page and do not revert to 100%, is that reduced zoom setting then attached to that page, so that when I publish that page, that smaller zoom setting is now associated with that published page?

[crispy68]

The zoom settings in your browser are independent of WB. WB does not control this. WB only controls the workspace zoom. I'm not sure if the WB zoom feature is saved for the project in general or not. That is a Pablo question but I want to say no.

[Pablo]

I'm not sure if the WB zoom feature is saved for the project in general or not.

Zoom in WWB is a global settings, it is unrelated to browser zoom.

[BarryZ]

It may be unrelated, but from what I observed, there's some sort of connection. I found that if you opened a WYSIWYG preview and reduced the page from 100% to say 70% or less, then closed the preview without reverting back to the original size, that reduced preview becomes the default size of future previews for that page. If I publish the website with the reduced page sizes, then that page will display in reduced page size when first opened and viewed. I've tested this several times, and the result was exactly the same as I was seeing.

My WYSIWYG skill level is far less than most everyone on here. I felt certain that I caused my problem, but I'll be damned if I could figure it out. Thanks to everyone for your help.

[Pablo]

It may be unrelated, but from what I observed, there's some sort of connection. I found that if you opened a WYSIWYG preview and reduced the page from 100% to say 70% or less, then closed the preview without reverting back to the original size, that reduced preview becomes the default size of future previews for that page.

This is a browser functionality. Is has nothing to do with WWB.
WWB does not store or control the zoom settings of your browser.

[BarryZ]

Okay. Just reporting what I'm seeing? All is working great now.