[Laura LParticipant]

Hello,

My website is http://www.lauraletchingerart.com, WP version 4.1.2, shortcode version 3.0.5

I use the Huge-It plugin for my painting galleries, and the developers cannot find a reason why the right side of the images in the galleries are cut off on my iPhone 5S. (galleries here: http://www.lauraletchingerart.com/all-work-gallery, http://wwwlauraletchingerart.com/available-work-gallery, http://www.lauraletchingerart.com/sold-work-gallery.) It does not happen on their Samsung Gallaxy s5. I contacted Apple, and they feel that the cutting off issue might be due to an incompatibility issue with the screen display size of the iPhone 5S. For example, when the phone is held horizontally (landscape orientation instead of vertical), the images do not cut off, they display fully and very well. Most viewers will not switch to a horizontal orientation though, because at first glance it looks like everything is behaving with full responsiveness. They probably won’t realize that they are missing parts of the paintings, which really isn’t a good thing as they are not getting the full impact of the art as they should. It’s also interesting to note that when turning the phone back to a vertical position from a horizontal position, the images retain full content! However, if they are reloaded, they again display with the cutting off.

I’ve noticed that there is cutoff happening in mobile on this page too – my email address is cutting off around the “c” in “com”: http://www.lauraletchingerart.com/contact
Is this a sign that it could be a WordPress problem and not a plugin or theme problem?

Would you have a solution for this?

Thanks very much,
Laura

[ThaiModerator]

Hi There,

Thanks for writing in!

Try adding following CSS under Appearance > Customize > Custom > CSS:
#1

@media (max-width: 480px){
	.element_4,
	.element_4 .image-block_4 {
		width: 100% !important;
	}
}

#2

.page-id-225 .entry-content h4 {
    word-break: break-all;
}

Hope it helps.

[Laura LParticipant]

Hi!

Thanks for your reply; unfortunately the new CSS did not do anything.. . I cleared all caches on both my phone and site as well . ..

Any other ideas?

Thank you
Laura

PS: I should say that on the contact page (http://www.lauraletchingerart.com/contact) my email address no longer cuts off; instead it runs over into a second line. But the goal is to have it stay all on one line.

[ChristianModerator]

Hey Laura,

Your images are cut off because it has a fixed width (see http://prntscr.com/6yl1x4). That width is set in your plugin’s CSS. It is neither the device nor X that has the issue. We’d love to help you with that but regretfully, we do not have support for third party plugins.

For your email, it is best to utilize our Responsive Text. See the links below for samples and tutorial.

http://theme.co/x/demo/integrity/1/shortcodes/responsive-text/
https://theme.co/x/member/kb/shortcode-walkthrough-responsive-text/

Your Huge it plugin also disrupts the layout in tablet view (see http://prntscr.com/6yl3a5). That plugin is not good for responsive themes or website. If you need a CSS solution, that would require additional media queries so that would fall to custom development.

Thank you for understanding.

[Laura LParticipant]

Thanks for your reply. It seems that with the CSS added, for some reason right now the “available work gallery” is displaying properly, however the sold work and all work galleries are still cutoff. I forwarded this thread to Huge It support. . .

[LelyModerator]

Hello Laura,

Your welcome.
Let us know if you need anything else.

Cheers.

[Laura LParticipant]

Hi again,

Here is my thread with Huge-It after trying your CSS:

HUGE-IT: The css code is actually right, but it will affect only on current page. In order it could affect on all galleries, instead of “4” you should write <?php echo galleryId; ?>

ME: So I replaced the “4” with as instructed, but it didn’t help; and now the “available work” gallery is cutoff again as well. . .
Here’s the code that is currently in use:

@media (max-width: 480px){
.element_<?php echo galleryId; ?>,
.element_<?php echo galleryId; ?> .image-block_<?php echo galleryId; ?> {
width: 100% !important;
}
}

.page-id-225 .entry-content h<?php echo galleryId; ?> {
word-break: break-all;
}

Is this correct?

HUGE-IT: the last one h4 shouldn’t be replaced) Also they gave you the code only for one page see page-id-225. You should ask them to give for all pages

*So I put back the last 4, but now they’re all cutting off again. Could you please check the code above and address what Huge-It is saying about need code for all pages? I would really appreciate it 🙂

Thank you,
Laura

[ThaiModerator]

Hi Laura,
Please try this following code:

.page-id-225 .entry-content h4,
.page-id-3553 .entry-content h4,
.page-id-3524 .entry-content h4,
.page-id-3564 .entry-content h4 {
    word-break: break-all;
}

BTW: <?php echo galleryId; ?> it should be <?php echo $galleryId; ?>
Hope it helps.

[Author]

Posts