Responsive Design Issue 
Autore: Jerald T.
Visite 2954,
Followers 2,
Condiviso 0
I have version 14. I'm having an issue with my responsive design, at the mobile resolution, in portrait mode. I have attached screenshots of what it suppose to look like in preview at 480 PX, and a screenshot of what it actually looks like on my mobile, which is actually different from the preview. It looks fine in landscape which I have also attached.
How do I fix this so it displays like the image in preview?
Thanks.
Jerald
Postato il
It looks to me the same.
If you mean the buttons by the pictures, these disapear if x5 sees a touchscreen, then the mouse arrow icon changes to a swipe button or enlarge button for touchscreen operation. You see that offcource not on your pc screen unless you have a touchscreen pc/laptop.
This is behavior as it should be.
Autore
Thanks for checking. The light brown header in portrait view doesn't appear to be the same width as the background, which is in a darker brown and light blue. When I switch to landscape view the width for both looks the same. I'm trying to get that effect for portrait view.
Thanks.
Jerald
Autore
Any suggestions for the above?
Thanks.
Jerald
The portrait view is a little bigger then the preview. The icon seems to be placed at the same location.
If you make your preview a bit wider will it look the same then?
I don't know what phone you have, what pixel width and what browser, and do you have in you phone settings for larger or smaller view, or in you pc in windows also there you can set a bigger view then pixels.
You can set your screen at 110% or 90 %. or other sizes. The text looks also bigger in preview.
It's even a bit differen on phones if you have the same phone and different browsers.
What I am saying it that it is difficult to compare.
Maybe with website adres I can also make a comparison and check for you.
Autore
I'm seeing it on my iPhone. I tried it on Safari, Firefox, and Chrome and seeing the same problem. The Header background is displaying correctly. It's the header image in the center that's smaller in width for some reason. The header image in the center should be displaying about the same width as the background header, but for some reason, it's not. Please feel free to compare. All the information is in the attachment.
Thanks.
Jerald
Jerald,
I looked at your website (this helps way better) and see that there is a difference in header size between the smallest viewport and the second smaller viewport.
In your example one is probably on a different viewport.
You can set them in x5 and compare them to create the same view.
It's best to check all viewports. In preview you have a colour screen bar on top. These are your viewports. See the difference between yellow and black, that is probably the difference what you mean.
You can set them in the template structure
http://help.websitex5.com/en/v14/pro/modello_struttura.htm
There you see the same solours as in the preview on the left side.
Check out the header section and adjust width for background and header so that the yellow and black viewport look the same.
Test in preview by checking you pc screen and set them on the edge of both and comapre your screen. Then if needed correct your template settings again for these viewports.
After that it should be ok. It's always best to check all viewport btw and adjust to max and minimum for every viewport. (check red and green on the border) and the same for the others.
You will see if you check it out. Let me know if you still have trouble.
Autore
I will. Thanks, Andre, that's a big help. I will get started on the suggestions right away.
Sorry it toke a bit of time, but as mentiond it'sss difficult to judge the viewports from a picture.
Again, let me know if you need more assistance.
Autore
Hi Andre,
I tried to adjust the width in the header but it's greyed out. Is this a locked feature that can't be adjusted in the template? That would solve my problem but I'm unable to make the adjustment. I have attached a screenshot so you can see what I'm seeing.
Thanks.
Jerald
Is in the previous setting the extend to browser window option on?
Then set it there off or on the smallest on.
The width of the header it self can not be set, this is controlled by the viwports settings. I recommend not to change these, cause these are adjusted to several most common used tabblad and phones.
Autore
Thanks, Andre, it was set to off. I'll just leave the settings where they are. It would have been nice to get both port views to match. They were matched in version 13. It'll just take a little getting used to.
Thanks again.
Jerald
Great that it's solved!
Thanks for the feedback.
Best Regards