Hi,
I just started using SiteOrigin Pagebuilder, and it seems great. I have a couple of small issues with how items display on mobile however. My questions relate to the following page:
www.sarahwilkins.net
1. The first image under the header is inserted in a Jetpack box and displays perfectly on desktop, but on mobile the top of the image is cropped under the white of the header. What’s strange is if I click away from this page then go back a couple of times, then it displays correctly. Even adding padding for mobile in the box just makes it clipped at the top but with padding?
2. The other six images I have at the bottom of the page link to the full size WP URL for the image. On desktop, no problem, but on mobile it’s not responsive, so the linked image loads full size and doesn’t pop to the screen size of the device.
Is there something I’m doing wrong.
Thanks for any help.
Scott
Hi Scott,
1. Unfortunately, I can’t seem to replicate this. To clarify, what Android are you using? I’ll try and use one that’s more similar to your device to hopefully allow me to replicate it.
2. Outside of literal image dimensions (see below), the image itself is displaying as expected. To clarify, how do you expect it to look on mobile devices?
Regarding the literal dimensions of the image, that appears to be happening due to the lack of available image sizes it’s being supplied with. Each image is output with a number of different sizes and the browser will decide (only the one it decides on will be loaded), based on resolution, which image to use. The images you’re referencing only have one additional size and it’s honestly not that much smaller than the default sized version of the image (500×500 vs 300×300). With all of that said, I personally wouldn’t worry about this as the difference in sizing will only cause a difference in a few hundred bytes (in total) and the larger images overall will display better on higher DPI devices.