Horizontal Layout issues

Support
#1

Please see attached.
I am perplexed as to why this is happening. In my layout I have created a number of sections and to each section I added an image and a text box. I then added left and right margin of 30px to each section, so both the image and the text box should be aligned. When I view the site on my mobile, and on my tablet, everything appears fine in the vertical view. However, on both devices, the horizontal view does not display properly. The image does not resize correctly to the viewport and the text does not align to the image.

The text not aligning to the image is particularly odd, because they are both contained within the same section. As for the image not sizing correctly to the viewport, I have selected “auto” and “no limit” for the Width and Max-Width in the setup of the image, so I’m not sure why it is not resizing.

Your input is appreciated.

#2

Hi @mcaravaglia,

Thanks for reaching out.

May I know what size of the image you’re uploading? The image will only respond if its container is smaller than the image itself, fitting to it. If the image is smaller than the container then it will simply display its original size. Try uploading an image about 979px (or 1024px and 1300px if you wish to fit it on tablet too ).

Plus, it’s recommended to upload a bigger size to cover most of the devices, even retina display required double the size of the existing image.

Thanks!

#3

Thank you Rad. Please see attached. My images are 140x810 and I am selecting the “Retina & Dimensions” option. Honestly, I am not really certain I understand this option and if/when it should be used.

#4

Hello @mcaravaglia,

The retina option will display the image in half of the dimension and if it is disabled, the full image width will display. Please also do not forget to change the width and maximum width of the image.

Hope this helps.

#5

Thank you RueNel. Setting Width and Max Width to 100% does not resolve the issue.

When the user initially opens the browser in portrait, it displays fine. Then, when you rotate the display to landscape, the images and text do not align and the images do not enlarge to fit the display. If you then refresh the browser, while in landscape, it then displays perfectly; and you can rotate back & forth between landscape and portrait and it works properly. It is only happening when the browser is initially opened in portrait and then rotated to landscape. Seems odd.

Michael

#6

Hey Michael,

The benefit of enabling the Retina option though is that your image would display sharp in retina Apple devices.

But, since your image is only 1440 x 810 px in size, enabling Retina will display your image as 720 x 405 px in non-Retina devices that is why you get a small image as in your screenshot.

As Rad has said, please use a larger image like 1920px in width and beyond. Just make sure you compress your images so it loads fast. See more details about Image Compression at https://theme.co/apex/forum/t/customizations-performance/210

If that does not still help, please give us the URL where you’ve added the image and access to your WordPress admin so we could see the actual setup or if there’s something that is causing the issue.

Post your URL in a Secure Note.

Thanks.

#7

Thank you Christian. I will try this. I am curious, however, why it displays fine in portrait and is only an issue when you turn the device to landscape; and then, why refreshing the browser, while in landscape, clears the issue.

#8

Hi @mcaravaglia,

I am not sure why this is happening in your case. We need to test the case to be able to give you a proper answer on why this is happening.

So the information below is needed:

  • The exact URL of the website that you took the screenshot.
  • Username/Pass of the WordPress dashboard to check how you setup the section.
  • The mobile device that you check your website in. Which Android OS version you use?

Answers to the questions above will give us a better understanding of the case and we will be able to give you a better service.

Thank you.

#9

The issue is most probably because of Jetpack’s Photon. It sets the image size based on screen width upon loading only and it does not take into account succeeding window resizes such as when turning phone from portrait to landscape.

Please try deactivating Jetpack Photon. If proven to be the cause of the issue, please contact Jetpack support.

Thanks.

#10

Thank you Christian. I will try this.

#11

You’re welcome!
We’re glad @Christian_y were able to help you out.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.