Hi.I have for now changed the module of the header with two blank lines above the picture.
This is not the right decision. To solve the problem, you need to determine the reason and fix it, but not create crutches.
In this case, it does not matter iPad or Android. This is not the right way of testing. Use the responsive mode in the your browser Dev Tools, reducing the screen width. And then you will completely see the reasons of the problem on screens of any width.
Sp Page Builder is not related to this. This applies to the template. The fact is that Header has a fixed height 150px. The menu is located inside the Header, but contains too many items that do not fit when the screen width is reduced and jumped to another line outside the height of the header.
Never use empty p tags and any tags at all (two blank lines above the picture) to solve layout problems. Remove them. Always use only CSS
Code:
#sp-header {height: auto;}.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {line-height: 50px;}
Delete this harmful code. Never use common selectors. This affects (in this case) on all images on the site. Use unique selectors to configure only the desired element. --How can the picture be full screen width?
After applying the recommendations, it will look like this To configure the desired menu height, use your own value in the line-height property
Code:
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {line-height: YOUR_VALUE;}
Statistics: Posted by Pavel-ww — Fri Dec 13, 2024 8:05 am