Website header looks wrong on iPad(2) and iPhone
Author: Erik J.
Visited 1636,
Followers 1,
Shared 0
With the earlier versions (EVO 10/11/Pro12) my website header was ok on PC, laptop, iPad and iPhone.
Please watch Pro 12 here: clarasvaenge.dk
However, with Pro 13 the header looks wrong on iPad(2) and iPhone.
Please watch Pro 13 here: test.clarasvaenge.dk
Posted on the
Author
I have made Pro 13 with the latest backup from Pro 12.
Hello Erik J.,
Try please to remove the custom HTML code you added in the section "Before closing the </HEAD> tag" since it is not correct and in version 13 it is important to have correct custom HTML code to make it work.
Then go to step 2 in the header footer content section and then check the header in the different breakpoints to see if there it appearss correctly and also in the template editor. You ned to clik on the different breakpoints you find on the left.
Many thanks!
Author
I don't know about HTML. Where can I find: "Before closing the </HEAD> tag"?
I upload an image showing my breakpoints. What do you suggest me to change?
Author
Here you have the file
Hello Erik,
Go in step 1 - advanced and open the Section "Statistic, SEO and code" open the expert tab and from the dropdown menu select "before closing the </HEAD> tag" and delete the content since it is not correct.
About the breakpoints I meant the breakpoints you find in step 1 in "Head and Footer Content" and in step 2 "Template structure" on the left. You need to adapt the content in these sections for every breakpoint.
Many thanks!
Author
I don't quite understand the following. Please explain it more in details. Thanks.
in step 2 "Template structure" on the left. You need to adapt the content in these sections for every breakpoint.
Hello Erik,
As you ccan see in the sreenshot I marked red the various breakpoints you will find in "Template structure" and also in the header footer content section.
You need to adapt the template and the content of the header and footer by clicking en every breakpoint like the ones in the screenshot.
Many thanks!
Author
I have tried to follow your screen shot. However, now the desktop website is totally wrong.
Watch: test.clarasvaenge.dk
Before it worked well with Pro12, Evo 11-10-9. On iPad nothing has been changed.
Please watch the 6 screen shots in the zip file.
I have made big websites in Pro12-Evo11-10-9 only with small problems. However, from the beginning of Pro13, I only have had problems. Several sites looked wrong. After hard work I cracked the problems except the header problem on iPad.
However, now is much more wrong. Perhaps I going to quit Pro 13. To several companies, I have build big and beautiful WordPress websites without any special problems. The last was: janprener.dk
However, I give Pro13 a few chances more. Few.
Author
In the above information: Several sites looked wrong. It should be: Several pages looked wrong.
Author
In your first reply, you wrote:
Go in step 1 - advanced and open the Section "Statistic, SEO and code" open the expert tab and from the dropdown menu select "before closing the </HEAD> tag" and delete the content since it is not correct.
I have now removed the second part. The first part is a well-working 'Statcounter statistic' telling me everything about the visitors. I get information each day from Statcounter.
What do you think is wrong with the "Statistic, SEO and code" now?
Author
Please watch the website made in Pro12: clarasvaenge.dk
No problems.
Hello Erik,
The Code now is correct. About the header in the Desktop it appears correctly but for the other breakpoints you need to use a smaller image or resize it. Select the different breakpoints and then use an image of the available size and then it will appear correctly.
In Version 13, since you can have more objects in the header and footer you need to check them in all the breakpoints so these will appear correctly without having objects longer then the visible area or outside of it.
Many thanks!
Author
I have rezised the headers in "Template structure". The headers are now in pixels:
1100 x 190
960 x 160
480 x 80
320 x 52
When I watch the website "test.clarasvaenge.dk" with my iPad 2 and my iPhone, the headers are still wrong.
However, I can't find out how to change in "Header and Footer Content".
I think the headers have to be identical with the rezised images in "Template structure".
Where have you shown how to do all these changes?
Hello Erik,
Can you please send me a screenshot of how it appears on the iPad and iPhone and also how it looks in the program for the smallr breakpoints?
Many thanks!
hi
send us your project to info at x5tuts dot com we will look at it to see where the issue is coming from and fix it for you.
thanks
Jamie
Author
Hi Claudio and Jamie,
Many thanks for your comments. However, late Sunday I found a solution.