responsive design issues

[izzy]

I seem to be having a strange problem when designing responsive pages. When i add breakpoints, let's say at 320 and 480, my default page, when I preview the page (f5), looks off. For example I have a light, textured background behind some text, which looks good in default mode when there are no breakpoints added. When i add breakpoint pages, my default page still looks good within WebBuilder, but when i go to preview mode the background texture in default mode gets very dense and dark. ( have hidden this object in the breakpoint pages and so these look okay in preview). And to make it even weirder, when i actually publish this as a test page, the page (default layout) looks horrible on my desktop. No texture at all, ugly gray box.

Another issue with this textured background. Even though i hide it in the breakpoint pages (i.e. uncheck Visible in Object Manager), when published the textured background appears.

If i were to delete all the breakpoint pages and just have the default page, then everything is back to normal. Can anyone tell me what is going on and how to correct this so i can get back to designing breakpoint pages without it messing up my default page?
I am working in version 17.

and a smaller side issue, i have a text CONTACT link on my default page with a lot of space between it and the text above it. however when i preview the page, the word CONTACT jumps up till it is practically touching the text block above it. I checked this out both in Chrome and Firefox. Help with this too?

Thanks in advance,
izzy

[Pablo]

To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.

I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Note that I cannot see what you have done based on the published page (HTML), because the software has thousands of options and millions of possible combinations.
So, there is no way to know which options you have used by looking at the HTML only.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

[izzy]

Thank you, Pablo. it took me a few hours to figure out how to do this. Here is the cleaned project. When i previewed it i see it was missing two image files, so I am including the links to that too. Not sure how this works when you view it.

www.impwriter.com/HCG2_TEST.wbs

www.impwriter.com/izzyzapf.GIF

www.impwriter.com/alephbet_horz.jpg

Hope what i sent is clear.
Thanks in advance,
izzy

[Pablo]

You have named one of the objects 'large_rect.'
This is incorrect. Using a 'dot' in the ID is not allowed, this breaks the structure of the HTML.

Related FAQ:
viewtopic.php?t=64868

See also:
Menu -> Page -> Error Reports

[izzy]

Thank you Pablo for your reply. That solved the problem. I apologize for the oversight in naming the object.

I still have a very frustrating issue that objects and text jump when previewed or published. In other works i might leave plenty of vertical space between two text boxes or between a text box and an object when designing within the program, but when previewed the objects have moved and the space i left is severely reduced or even begin to overlap. This happens regardless of the browser. How can i assure the objects don't move? ( i tried to search for this topic on the forum to see if others had this issue and a solution given but i could not find)

Thanks in advance,
Izzy

[crispy68]

I looked at your project and I don't see any issues with the 'contact' button and the text above. The spacing between the 2 looks that same when previewed as it does within the project.

Each browser can render text and spacing slightly differently. You can set your text output to "include line-height in text styles" which may also help with this issue but you shouldn't be seeing big gaps. I would also look into creating a fluid/floating layout which would alleviate this issue by using grids, etc. for layout versus just a static fixed layout like you have.

[BaconFries]

i tried to search for this topic on the forum to see if others had this issue and a solution given but i could not find)

See the following:
How to optimize text for different browsers?

[izzy]

I made a demo page for the project i am having trouble with regarding text and objects moving, no matter what the browser. All looks good when designed in the program but when i preview (in the default mode, not in the 320 breakpoint for phones), whether in firefox or in Chrome, both texts and images move and sometimes even overlap. Please help.
thanks,
izzy

Here is the project and here are the two images that go along with it.

http://www.impwriter.com/test pages for upload.wbs

http://www.impwriter.com/WATERFULLTRIMJPG.JPG

http://www.impwriter.com/ani.jpg

[Pablo]

I don't think the objects 'move'. The text object has too much text (and line breaks).
This may cause overlaps when using fixed/absolute layout.

This is documented here:
viewtopic.php?t=34318

So, to solve this you will either have to break up the text into smaller pieces, add line-spacing or use flexible layout.