Failed to create reponsive page

[lindgm]

Hi!
My front page looks nice on most devices in landscape mode. I cannot test it for portrait mode for my pc, because the screen is landscape, but it looks OK on my Android cellphone. However on my Android surfpad it does not look good at all, the picture not filling the screen.

I attach med project file (example.wbs), a picure of my surfpad screen (picture.jpg) and a homepage showing the problem page (test.bjorkenasgolfklubb.com) and hope that someone of you can help me!

Regards Jan


https://test2.bjorkenasgolfklubb.com/example.wbs
https://test2.bjorkenasgolfklubb.com/picture.jpg
https://test.bjorkenasgolfklubb.com

[alan_sh]

I tried to open your .wbs file but it's missing all the images. You need to create a zip file with the .wbs file and the folder of the same name.

One thing you can try - in Firefox, you can click on Tools -> Browser tools -> Responsive design mode and then choose a screen layout that matches the iPad. You may be able to experiment using that (other browsers may have the same ability, I don't know).

Alan

[alan_sh]

I did look at it and you need to use a layout grid and not a layer if you only have one breakpoint.

Alan

[Pablo]

The layout of your website is 'fixed' which means that all elements on the page have a fixed / absolute size and position.
So, you will have to add breakpoints to adjust the layout for smaller screens.
Alternatively, you can make the website 'flexible' so the layout will scale automatically.

See also this related tutorial:
https://wysiwygwebbuilder.com/layout_modes.html

[onlye]

The layout of your website is 'fixed' which means that all elements on the page have a fixed / absolute size and position.
So, you will have to add breakpoints to adjust the layout for smaller screens.
Alternatively, you can make the website 'flexible' so the layout will scale automatically.

See also this related tutorial:
https://wysiwygwebbuilder.com/layout_modes.html

Pablo, is there a template available for that Card Site?

[BaconFries]

The template(s) can be found at the following:
https://www.wysiwygwebbuilder.com/templates2024.html
Splash
https://www.wysiwygwebbuilder.com/suppo ... h_art.html
Corel
https://www.wysiwygwebbuilder.com/suppo ... lreef.html
Theme
https://www.wysiwygwebbuilder.com/suppo ... edfun.html

[Pablo]

This specific template is available here:
https://www.wysiwygwebbuilder.com/templates9.html

[lindgm]

Thx for the answers, but I do not really understand!
I have a floating layer in floating mode full screen. Inside that layer I have an image with size cover.
Why is not full screen working on my surfpad, when it works well on computers and on my cell phone where the screen size is much smaller?
Further the masterpage which overlaps the top of the screen have the correct width also on my surfpad.

[Pablo]

Layers are not flexible, they have an absolute / fixed size. So, the layout will not scale automatically.
To make layers responsive (or adaptive) you will have to add breakpoints.

If you want to create a flexible website which adapts automatically to smaller screen then please use layout grids or flexbox instead.

See this related tutorial:
https://wysiwygwebbuilder.com/layout_modes.html

[lindgm]

What does then full screen mean for the layer? Confusing!

[Pablo]

'Full width' means that the layer itself will be full width of the page. However, the content of the layer (child elements) is fixed/absolute by design. That is the whole point of layers, compared to layout grids.
- Layers are for fixed/absolute layout.
- Layout grids/flexbox are for flexible layout.

The difference is explained here:
https://wysiwygwebbuilder.com/layout_modes.html

[lindgm]

Of course what you say Pablo is correct and I will follow your advice, but I still do not understand why my fixed design behaves as it does. Please explain!

I have a floating layer in mode full screen. Hence that layer should fill the screen, right?
Inside that layer I have an image in mode cover. Hence the image should cover the layer and since the layer is full screen also the image should fill the screen.
What I see on my surfpad is an image that does not fill the screen, not in width, neither in height. However if I hold my surfpad in landscape mode everything is covered.

[Pablo]

The layer is full scree. However, when the content of the layer is larger then the view port then the browser will add scrollbars, because the content of the layer is fixed.
Or in to ther words 'the layout will break' That is why you will need to add 'break' points.

[lummis]

I believe your surfpad is 1280 wide whilst your example project shows that the design is 1000 wide. the layer will therefore be fixed to 1000 and not fill the screen.