Scoreditch & WP4.8 – text zoom problems – Panel Page

  • I updated my site to WordPress 4.8. I use latest version of Scoreditch and pages are on web-hotel.
    I use Panel Page as a static home page. I see problems in the pages that follow the Panel Page. But only in pages that have a Featured image. If you zoom the page, text starts to be clipping from right.

    My site dtream.fi

    Sorry – pages are in Finnish, but scroll a bit down to page “Dtream Oy” and zoom the page. I see clipping with 125% zoom in IE and Edge (both InPrivate mode).
    I did some testing with different Featured Image size, but I did not notice any difference.

    I cannot be 100% sure that the effect was not visible in earlier WordPress versions.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi there,

    I tested this on your site in Edge, but I didn’t see any text clipping:

    Showing Zoom Level

    Without Zoom Level Shown

    Are you able to replicate this on other computers using Edge?

    Could you link to a screenshot of how it looks for you?

    Thread Starter jjuhola64

    (@jjuhola64)

    Hi,
    With my home PC and Edge the page works with 125% and clips with 150%.

    Page ok with 125% zoom

    Page clipping with 150% zoom

    Clipping with 150% is not so bad problem. 125% should work. This PC is have Full HD display resolution 1440×1080. The other PC having the problem with 125% zoom had 1440×1200 display resolution.

    • This reply was modified 7 years, 9 months ago by jjuhola64.

    Hmm, I’m still not able to replicate this.

    It sounds like it works at 125% on your 1440×1080 home pc screen, but clips at 125% on your other 1440×1200 screen. Both screens have the same horizontal resolution, and the non-working screen has a greater resolution than the home pc.

    Question: Are you using the same version of the browser on both machines?

    I’m not sure that what you’re seeing has to do with either the resolution or the theme. It works on one of your machines, and it also works on the machines that I’ve tried. I actually haven’t been able to get it to clip so far, even at greater zoom levels.

    I just tried it at 200% in IE11 (I used Edge last time) and it also seems to work fine there:

    Would it maybe work better to increase the font size for that main area so it doesn’t have to be zoomed?

    Thread Starter jjuhola64

    (@jjuhola64)

    Hi,
    Let me start with question – Why there is a difference what is shown on top of the Featured image.

    If page follows Static home page – panel page format
    Text is shown on top of the Features image

    If you go to the same page directly
    Text is shown below the Features image
    https://www.dtream.fi/welcome/dtream/

    Is this by purpose?

    Pages that are under Static home page (Panel page template) and have featured image have the zooming problem. They show the page text on top of the Featured image.

    If you go the same page directly (link above)
    Text is not shown on top of the featured image and zooming is handled normally.

    Zoom works fine for page without Feature image, full width page template that are under the same Static home page.

    Somehow the problem is connected to the featured image and putting text on top of the image.

    I also tried to change the featured image to the recommended size 2000 x 1500, but it did not change the situation.

    I have tested with 4 different Windows 10 machines with latest IE and Edge versions, one RT8.1 and one Windows 8 phone and all of them have the problem. One of the PC was connected to higher resolution monitor, no difference.

    IE 11.413.15063.0
    EDGE 40.15063.0.0

    Opera browser is the only one I have found to show the pages correctly.

    Too bad that you cannot repeat the problem.
    Then there is not much we can do about this – just hope that people do not much zoom in.

    BTW, any good hint how to control the Featured image clipping in Static home page?

    Why there is a difference what is shown on top of the Featured image…If you go to the same page directly
    Text is shown below the Features image…Is this by purpose?

    Yes, this is how the theme is designed. You can see the same behavior in the demo with the Responsive Design section of the front page, and on the Responsive Design page itself:

    https://shoreditchdemo.wordpress.com

    https://shoreditchdemo.wordpress.com/welcome/responsive-design/

    any good hint how to control the Featured image clipping in Static home page?

    The image is used as a CSS background image:
    https://www.w3schools.com/csSref/css3_pr_background-size.asp

    You could try setting a specific size for the background image, but it may not look great on all browser widths/devices.The theme is designed for images that are okay to be cropped.

    This is the CSS that causes the featured images to display the way they do:

    .page-template-panel-page .hentry.has-post-thumbnail {
    background-size: contain;
}

    You can add that to your site via Customize > Additional CSS, and change the contain value to another value that works better for you.

    Thread Starter jjuhola64

    (@jjuhola64)

    Thank’s David,

    I do have the Featured image size in pretty ok control now.
    I tested all background-size values, but there is no effect to the cutting of text on zoomed page.

    -Janne

    Hi Janne,

    I’m glad the featured images are working well.

    I haven’t found anything in CSS that can account for how text appears when zoomed by the browser. That’s sort of an unpredictable situation, and all browsers may not handle that the same way. Hopefully most users will view the site at its 100% size. You could always increase the font size a bit if you feel like it may be too small for some of your visitors. That may decrease the odds that they’ll zoom.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Scoreditch & WP4.8 – text zoom problems – Panel Page’ is closed to new replies.