WebSite X5Help Center

 
Paul A.
Paul A.
User

Header not responsive  en

Autore: Paul A.
Visite 2002, Followers 1, Condiviso 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

Postato il
4 RISPOSTE - 1 CORRETTO
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.

Leggi di più
Postato il da 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

Leggi di più
Postato il da Esahc ..
Paul A.
Paul A.
User
Autore

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

Leggi di più
Postato il da 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.

Leggi di più
Postato il da Esahc ..