ipad misaglinment

[charlotte.bebbington]

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

[David Martin – Support]

Hi,

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:

[charlotte.bebbington]

Hi 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.

[David Martin – Support]

Hi,

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;
}
}

[charlotte.bebbington]

Hi 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.

[David Martin – Support]

Sure will take a look, I currently get this error:

[charlotte.bebbington]

This reply has been marked as private.

[David Martin – Support]

Please 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.