Digital experiences for all disciplines
New Landing › How can we help? › Atelier › ipad misaglinment
New Landing › How can we help? › Atelier › ipad misaglinment
- This topic has 7 replies, 2 voices, and was last updated 8 years by David Martin – Support.
-
Posted in: Atelier
-
July 17, 2016 at 11:17 am #281778
Hi,
Having problems with my site when viewed on a portrait ipad.
– Right margin runs off the screen, mostly when using a right sidebar.
– When using the tiles on the homepage large text exceeds the frames. Can you recommend a solution?Thanks
July 18, 2016 at 4:35 pm #282063Hi,
What theme version and SF plugin version is that?
1) Do you have a link, for example I see on your shop page the header overlaps:
2) Do you mean the boxes such as:
July 25, 2016 at 8:51 am #283532Hi David,
The boxes are a problem with the amount of content. So unless you have another solution I just need to reduce the font size and content.
On my iPad the right column on the blog (community) page and the social slider on the home page run off the edge. See attached pictures.
Thanks for your help.
Attachments:
You must be logged in to view attached files.July 26, 2016 at 9:42 am #283877Hi,
you can reduce the image banner text sizes on smaller screens using this:
@media only screen and (max-width: 991px) { .image-banner-content > h2 { font-size: 16px; } .image-banner-content > p { font-size: 11px; } }
In your case, it may be better to use different image banners specifically for smaller screens. You can then add different/shorter content and without the images.
You can set specific visibility settings for these new banners, ie mobile/tablet/desktop or all within the Page Builder settings for that element.
—
Your Community sidebar looks to have some custom HTML formatting:
You should override that for smaller screens or remove it: Ex:
@media only screen and (max-width: 991px) { .widget .textwidget * { word-break: break-word; white-space: inherit; max-width: 100%; font-size: 16px!important; } }
July 28, 2016 at 12:38 am #284434Hi David,
Thanks for you tips re the banners. Will look into it.
Re the blog sidebar. I have removed the custom HTML code which has fixed the issue for that widget. Still having the issue with the tag cloud, Instagram and Facebook widgets. I cannot recall using any custom code. Prehaps the Facebook widget is because of the pixel size I have specified? Could you please have another look.
Thanks a lot.
Attachments:
You must be logged in to view attached files.July 29, 2016 at 10:15 am #284806Sure will take a look, I currently get this error:
August 13, 2016 at 12:22 am #287255This reply has been marked as private.August 15, 2016 at 12:03 pm #287404Please test this for the tags & insta title:
@media only screen and (max-width: 991px) { ul.wp-tag-cloud li { clear: both; margin-bottom: 8px; } ul.wp-tag-cloud li > a { font-size: 9px!important; padding: 4px 6px 4px 7px; } ul.wp-tag-cloud li:after:before { display: none; } } /* Insta */ .title-wrap h3.spb-heading span, h3#reply-title span { word-break: break-word; font-size: 12px; }
Nothing can be done for the FaceBook widget as the iFrame content is set by FB/Jetpack plugin.
Thanks.
-
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.