-
-
I have created the following website:
Everything is fine. There are just a few problems when watching the website on mobile devices, such as Ipad and Iphone5. The content doesn’t fully scale as supposed to do, e.g. the white content box scales smaller than the header and footer (Ipad) and the text and the logo partly run over the white header and footer box (Iphone5).
How can this be optimized? Many thanks for your support in advance!
-
Hello,
Please add this code into your custom css box:
@media (max-width:480px){ #content { width: 268px !important;} #logo { left: -37px !important;} .mobile_small_menu { left: 6px !important;} } @media (max-width: 767px){ #copyright .desc { width: 97% !important; margin-left: 3px; }} @media (max-width: 979px) and (min-width: 768px){ .mobile_small_menu { top: 50%;} #content { width: 646px !important;} .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container, .header_7.header_wrapper .container { width: 647px !important;} .wpb_text_column.wpb_content_element { margin-left: 12px;} }
Best regards!
-
Dear Mihaila!
Thank you very much for the quick answer! It works in some parts, e.g. footer, but there are still the following “bugs”:
Ipad – horizontal view:
When scrolling down, the middle content part scales down and then is smaller than header and footer.
Ipad – vertical view:
Only the pictures in the middle content part end at the borders of the box (no white”frame” visible any more). Also the text is quite near to the border. This is not so important like the problem described in “Ipad – horizontal view”.
Iphone5 – vertical view:
The logo in the header doesn’t adjust to the header and still goes over the right border of the header.
Many thanks in advance!!!
-
And one further comment:
Iphone6 – vertical view:
This is visible when opening the website: The middle content part is scaled down and therefore is smaller than header and footer on the right border.
Many thanks!
-
I am still searching for the solution to my above mentioned problems.
Could the problem be that I set up Specular the following?
Specular Settings under “Layout”:
Page Container Width AND Boxed Container Width with the same values: 1100 px – 84%?
I already tried various variations, but nothing works…
I’d be pleased to be supported by you.
Thanks!
-
Hello again!
I have just deleted your customized CSS-Code from yesterday and changed the following:
Page Container Width: 1100 px – 84 %
Boxed Container Width: 1100 px – 100%
On computers it looks perfect.
On mobile devices, the container now doesn’t show a frame on the left and right side any more. The container box goes straight from the left to the right side. This is ok for me. I will leave it like that.
Or ist there anything else that I can do to change this effect?
Many thanks! Great theme anyway!
-
Dear Mihaila!
Yes, your result is exactly the look that I want!
So, I have just tested to put the boxed container on 90% but the problems from mentioned above still occur:Ipad – horizontal view:
When scrolling down, the middle content part scales down and then is smaller than header and footer.Iphone5 – vertical view:
The logo in the header doesn’t adjust to the header and still goes over the right border of the header.Iphone6 – vertical view:
This is visible when opening the website: The middle content part is scaled down and therefore is smaller than header and footer on the right border.If you can help, that would be great. Otherwise I will leave it like that because the boxed container at 100% doesn’t cause any problems on the mobile devices.
Many thanks from Madeleine
- This reply was modified 8 years, 11 months ago by Mirela. Reason: html
-
-
Hello,
Please send us your site’s credentials in a private reply. I will fix it for you.
Best regards!
-
You must be logged in to reply to this topic.