Page 1 of 1

Break point leading to poor formatting

Posted: Tue Jun 16, 2020 11:54 am
by charles m
Hi Pablo

Here is a novice question im sure. Crispy has very kindly pointed us in the direction of a few problems we have been having.
The general layout for our website is now set and we are getting into the detail.

Currently we have been working on the homepage which we have managed to get to work for both monitors and view on smaller phones using a break point set at 375 in portrait). This works perfectly,
https://www.meloy.co.uk/meloydemo/

Then we have tried to do the same thing on the project page (which will form the basis for the other pages).
https://www.meloy.co.uk/meloydemo/Hill- ... vhaus.html

This will allow us to hide unwanted layout grid boxes and make the site more responsive for really small screens. The problems being the header and footer lose their formatting. I have checked all the objects to make sure they aren't larger than 375....

I have tried the breakpoint setting in none and constrain to portrait (which is how the homepage is set). This makes no difference.

I'd be grateful for any ideas :-/ ? Its a minefield out there!

Thanks Charles

Re: Break point leading to poor formatting

Posted: Tue Jun 16, 2020 12:13 pm
by Pablo
There are several images with invalid filenames.
- names should not start with a number
- filenames should not have spaces

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... f=10&t=131

Re: Break point leading to poor formatting

Posted: Tue Jun 16, 2020 12:35 pm
by charles m
Thanks Pablo

Ive updated the naming. Unfortunately it makes no difference.... :-/

Re: Break point leading to poor formatting

Posted: Tue Jun 16, 2020 12:46 pm
by Pablo
What is it suppose to looks like?
Where exactly on the page do I need to look to see the problem?

Re: Break point leading to poor formatting

Posted: Tue Jun 16, 2020 12:55 pm
by charles m
So its the difference between the homepage

https://www.meloy.co.uk/meloydemo/

and the project page

https://www.meloy.co.uk/meloydemo/Hill- ... vhaus.html

both work well when viewed in a standard monitor. When viewed in a phone (less then 375) the project page has problems. The header misaligns (you will see the 'MA' drops down. Also the footer is all over the place (misaligned text, large twitter symbol and large 'RIBA' image)....

Re: Break point leading to poor formatting

Posted: Tue Jun 16, 2020 1:20 pm
by crispy68
I'm not seeing any issue. Viewed on my Samsung Galaxy 7. Viewport size of my phone is 360px.

homepage:

Image

project page header:

Image

project page footer:

Image

Re: Break point leading to poor formatting

Posted: Tue Jun 16, 2020 1:25 pm
by Pablo
I also do not see any issues on my iPhone.

Also, are you sure your phone has a smaller screen than 375?

Re: Break point leading to poor formatting

Posted: Tue Jun 16, 2020 3:02 pm
by charles m
Thanks Crispy. Good to know it could work.
I found the problem by clearing the data on my Samsung. These two pages are working find now though.
Thanks gain for your help