Windows and iOS Display scaling differences - BIG Problem

Jennifer Dart

• April 18, 2021 02:15

I'm building my website using Windows 10. In Windows, the default and recommended display scale is set at 125% (It's quite small at 100%). But as I understand, the iOS default is set at 100%. If I build it for the 125% default it looks terrible at 100%, and vice versa. The difference completely alters my website. 

Is there a way to fix this? Am I doing something wrong? While I have an ipad, I don't have an Apple computer to check and see if my build is going to work for iOS. 

0

• 

  Sandra Prunici

  • April 19, 2021 14:25

  Hi,

  I am using iOS and I noticed that your site is looking good. See here. If you want to avoid some inconveniences related to the background image, I can suggest adding the image in the Image element (not in the block background).

  Best regards,
  Sandra

  0
• 

  Jennifer Dart

  • April 19, 2021 17:30

  That seems to have cut off a significant portion of my image, unfortunately. 

  I've previously tried to use the image element instead, but had difficulty with either a large margin or the image is cut off like it is above, depending on the display scale. I also had trouble using the menu element on top of it. The menu has to line up with the banner on the image.

  The way I was doing it with the image element was to add a column, delete one column, place the image in the background of that column and add the menu element. I then used spacers to try and increase the image size and make the menu sit on top of the banner in my artwork. I just couldn't make it work.

  Is there a better way to do it? Or is there any kind of code or something that would automatically adjust things depending on the scale being used?

  0
• 

  Sandra Prunici

  • April 20, 2021 11:47

  Hi,

  If the image is added to the column or block background it is hard to manipulate with the image sizes. Therefore, the best solution for this is to add the image inside the Image element and set the margin and padding for the column, image element and block with 0 value. Also, you can set the block with the full width and auto height https://jmp.sh/56pKL4O.

  Best regards,
  Sandra

  0
• 

  Jennifer Dart

  • April 20, 2021 17:29

  But how do I use the menu element on top of the image in the location I've designed? Is that possible?

   

  0
• 

  Sandra Prunici

  • April 21, 2021 08:31

  Hi,

  Yes, it is possible. You can add the menu element and after it the Image in the same block. Or, you can add the menu in a separate block and after this, the block with the Image.

  Best regards,
  Sandra

  0
• 

  Jennifer Dart

  • April 21, 2021 16:53

  I'm sorry, but this didn't solve my problem. Maybe I'm not understanding correctly (this is my first time building a website), but when I said "on top" I meant the menu overlapping the image, not below it or above it in the same block. Even reducing the margins on the menu only gets a slight overlap. You can see on my image that I have a banner there on the artwork where the menu is supposed to be. The only way I've ever been able to do that is using the background image or a column. Is there no other way?

  0
• 

  Sandra Prunici

  • April 22, 2021 10:14

  Hi,

  Unfortunately, if you add the image in the Image element it isn't possible to add the menu element on it. If you want to place the menu on the image element, you can try to add the negative margin to the menu element. See here.

  Another solution for this can be to add the image in the background of the block but don't add padding to the block. Instead of the padding, add the Spacer element https://jmp.sh/atAPKDX inside the block after this customize the height of the Spacer for the tablet and mobile mode.

  Best regards,
  Sandra

  0

Please sign in to leave a comment.