WebSite X5Help Center

 
Paul A.
Paul A.
User

Header not responsive  en

Autor: Paul A.
Visitado 1999, Followers 1, Compartido 0  

X5 Professional 13. v13.0.1.16 (64bit)

web site: www.wirraltearooms.co.uk

Am happy with the site I have just finished for a client - but the Header on a Smartphone does not render correctly...

It takes full width...

Do I need to add the header title as an image...? (instead of text)

Many thanks

Publicado en
4 RESPUESTAS - 1 CORRECTO
Esahc ..
Esahc ..
Moderator

Paul, I tried to go to www.wirraltearooms.co.uk but I couldn't get the site I'm sorry.

I am going to guess that you are happy with all the other breakpoint resolutions, it is just that the header doesn't fit when uou look at it on a mobile (it should in landscape).

I have found the default 400 pixels too generous for most phones. Since you have pro you can change this. I use 350, but you could use less if you prefer and then adjust your header appropriately.

Leer más
Publicado en de Esahc ..
Esahc ..
Esahc ..
Moderator

Paul

I do not know what was going on with my web browser, but I can now view your website.

You need to go to Step 2, customise template and adjust the header content for each resolution (selectable on the left). WX5 is quite clever in that you can arrange each of the items for various resolutions without affecting the position of items at higher resolutions (well at least that's how it worked on the last project I imported). You can also hide objects for the current resolution and/or lesser and replace them with appropriately sized objects or text. You can quickly see your efforts reflected in the preview and the various  browser widths.

You may also wish to reduce the width of the mobile resolution from the default 450pixels to 350pixels as I mentioned in the earlier post.

My site bears no resemblance or relevance to yours, but you may like to see how the header reacts as the browser window is made narrower. I have rearranged and replaced everything as necessary for each potential resolution.

http://www.esahc.com

Enjoy v13

Leer más
Publicado en de Esahc ..
Paul A.
Paul A.
User
Autor

Esahc... Many thanks for your reply I'd halfworked that out... laughing but the help files are basically no help at all.

The only problem is that the main text header - on mobile phones - overlaps the mobile header...

How do I hide it...?

Paul

Leer más
Publicado en de Paul A.
Esahc ..
Esahc ..
Moderator

Paul, simply select the object/graphic/text you don't want to see then select hide for this or this and subsequent viewports.

Leer más
Publicado en de Esahc ..