New User, with problems

[cameo]

Hallo everyone from Italy
I'm a rookie and I made my personal webpage with this program. The first experience was beautiful, but I have a problem: there are a lot of difference about what I get compared to what I see.
Viewing on PC browser it's all ok, but when I try to see it in my cellphone, header and footer are incomplete. The website has a page size of 1200x1080. When I watch in All Browsers, Header and Footer fill up all my monitor width (Full HD 1920x1080), extended perfectly left-right, but in my Android phone with the same browsers has a lot of "bugs", including the image gallery opening on the left side (but I aligned central)
Have I made some errors? I don't touch codes, because I'm not expert.

This is the website: http://cameorav.altervista.org

Best regards, thank you.

cameo

[Pablo]

It does not look like you have optimized your website for mobile devices.

To make your website mobile friendly, you will either have to add breakpoints (for fixed layout) or use layout grids/flexbox (for flexible layout).

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

[alan_sh]

I've made a 5 breakpoint template you can download to (a) get you started and (b) learn about breakpoints. It doesn't use any flex boxes at all, but should help you get to grips with different sizes for different devices.

Have a look here https://www.wysiwygwebbuilder.com/forum ... 41&t=88171

cheers

Alan

[cameo]

Thanks to ALL !!!
Now I'll study the tutorial and I hope to apply suggestions in right mode.
Greetings

[cameo]

I tried to resize all website to 1920x1080, with a fixed resolution.
When I try to see in local it's all ok, but when I watch online, now, words and pictures are moved on right side! But inside the project I put "centered" style.
On my android phone there are the previous problems + new "moved right"
Made websites with "responsive" need a skill higher then mine
Where is the mistake? inside *.css or inside *.html file?
Thanks a lot

[Pablo]

Did you add breakpoints to your layout?

[cameo]

Did you add breakpoints to your layout?

No.... I'm not sure where put this breakpoints. New Smartphones are with a screen resolution from HD/FullHD to 4k now.

[BaconFries]

No.... I'm not sure where put this breakpoints. New Smartphones are with a screen resolution from HD/FullHD to 4k now.

In RWD (Responsive Web Design), breakpoints are used to the “point” at which the pages content and layout will adapt to the device used so to provide the user with the best possible viewable display without the need to scroll left/right to view the contents

See the following for more information
What are breakpoints?
https://www.wysiwygwebbuilder.com/forum ... 10&t=63817
Introduction to Responsive Web Design - The Basics (see video tutorial)
https://www.wysiwygwebbuilder.com/rwd_basics.html
Responsive Web Design in WYSIWYG Web BuilderYou
https://www.wysiwygwebbuilder.com/respo ... esign.html
Popular screen resolutions
https://mediag.com/blog/popular-screen- ... g-for-all/

[Pablo]

Your layout is too wide for smartphones. So, you will need to add one or more breakpoints, otherwise the mobile browser will add scrollbars.

Also, I do not recommend to use vertical page alignment. See also the note about this in the help.

[cameo]

Thanks you all.
I'll try to translate the tutorials with Google...to learn more or use a Template that is similar to my project, and "study" the structure.

[andyp]

For a basic understanding of break points this is a good tutorial but based on an earlier version.

https://www.youtube.com/watch?v=cFf5DU8V0Lc

Also you must enable 'Responsive Fonts' and to do this right click on a line of text in your index and tick 'Enable Responsive Fonts'

This will allow you to change the size of the font in each break point...