Mobile Display Oddity

rjwilner

I am experiencing an oddity for a page on my site. I hate to ask anyone to have to go to the site, but I doubt I can explain the issue sufficiently via text for others to understand....
- On this page, I have added a variety of 'Multiple Photos' content blocks along with a Text block to provide some description of the images.
- To provide a little variety on the page, I have designed things such that the Text blocks for each group of associated images may fall to the left of the image group, sometimes the Text block falls to the right, sometimes above or below.
- And just for disclosure, there is also a 'Separator' and 'Spacer' creating some separation between the various sections.

In a desktop/laptop environment, I think it makes a nice flow to the design and displays as desired. The same is true when viewed on a tablet (iPad).

Where things go a little wonky is on the iPhone11 (Safari browser, IOS13)...
- When the device is held in 'Portrait' mode, there is some odd display behavior because the Text blocks always fall either above or below the associated group of images. The right/left displays are not observed in this display. And there are some odd white space issues because of the Spacer/Separator blocks. Not ideal, and I can live with that...though it would be nice to know if there's a mechanism to eliminate the white space oddities.
- But when I turn the phone to a landscape orientation to view the pages is where things go off the rail. The size of the text varies significantly. It appears all the sections where my design had the Text block fall either above or below it's associated group of images, that text is MUCH larger than those sections that were originally designed to have the text block fall to the left/right of the image group. This I would really like to resolve.

Hopefully, the above will make some sense, but will be glad to provide any add'l info if needed.

Thanks!

Hikin' Mike

Since I don't own a mobile device, the best I can do is to reduce the screen size to replicate a mobile. I also don't know the intended design on smaller devices, so to me, your site looks fine to me.

Are you wanting the text blocks to always be next to the photos on all screen sizes?

rjwilner

@Hikin' Mike said:
Since I don't own a mobile device, the best I can do is to reduce the screen size to replicate a mobile. I also don't know the intended design on smaller devices, so to me, your site looks fine to me.

Are you wanting the text blocks to always be next to the photos on all screen sizes?

On the mobile platform, I'm fine with the basic manner in which SM is 'rearranging' things such that, in each 'section' (a small group of images along with a textual description), the text description always falls below or above the associated group of images. Though I like the variety of intermixing some sections for which the text description falls either to the left/right of the image group for the desktop/tablet environment, I understand the 'rearranging' SM does for mobile.

What's less than ideal in the mobile environment is the size of the text displayed when the mobile device (iPhone 11 here)... is held in 'landscape' orientation. For those 'sections' where I had placed the text description above/below the image group, the text appears to be something like a 24px size font. But in those sections that were originally designed with the text description to the left/right of the image group...but have been 'rearranged' such that the text now falls above/below the image group...the physical size of the text appears roughly equivalent to a 12-14px font. The dramatic diff in the 'font size' of various sections looks more than a little odd.

I'll see about getting a screen cap from the phone that might better illustrate the issue.

Thanks for the reply!

Hikin' Mike

@rjwilner said:
I'll see about getting a screen cap from the phone that might better illustrate the issue.

Thanks for the reply!

That will help, because I'm not following you.

Jtring

I just took a look on my Pixel 2, an Android phone. Portrait and landscape look acceptable and not much different. I do see the extra spacing you mention, in part due to the spacers, in part due to the extra line feeds you added in the text blocks. I don't see any of the font changes you mention. Nothing varies for text right/left/above/below in the desktop view. A little web searching indicates there have been problems in the past with iPhones rendering the Open Sans font that you are using, but I don't know where that stands today, and I don't have an iPhone to check. If it were me, I'd write the help desk on this one. It looks like there's some sort of weird font interaction between Smugmug and the iPhone world. They may know about it.

Hikin' Mike

You are trying to center your text horizontally by adding spaces (<br>) and that is causing some of your formatting issues with smaller devices. I suggest switching your Text Blocks to HTML Blocks and some CSS so you can center your text on desktops and remove the "extra spaces" on smaller devices. As an example, add this to each of your Text Blocks:

<div class="text-container">
  <p>Paragraph here.</p>
  <p>Paragraph here.</p>
  <p>Paragraph here.</p>
</div>

Add this to to the CSS section:

.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 500px; /* height of photo block */
}

@media ( max-width: 736px ) {
  .text-container {height: 100%;}
}

Note that you need to change the height: 500px; to match the height of the Photo Block in each of your sections if you are trying to center the text. If you don't want to have that text centered, then remove the CSS stuff.

rjwilner

@Jtring said:
I just took a look on my Pixel 2, an Android phone. Portrait and landscape look acceptable and not much different. I do see the extra spacing you mention, in part due to the spacers, in part due to the extra line feeds you added in the text blocks. I don't see any of the font changes you mention. Nothing varies for text right/left/above/below in the desktop view. A little web searching indicates there have been problems in the past with iPhones rendering the Open Sans font that you are using, but I don't know where that stands today, and I don't have an iPhone to check. If it were me, I'd write the help desk on this one. It looks like there's some sort of weird font interaction between Smugmug and the iPhone world. They may know about it.

Thanks for taking a look. Much appreciated. Interesting that you don't see any diff in text sizes, so maybe it is still an iPhone thing. I will look into the Open Sans font thing you mention. I"m certainly not married to that and sure I can find something else if that's the issue.

Thanks again!

rjwilner

@Hikin' Mike said:
You are trying to center your text horizontally by adding spaces (<br>) and that is causing some of your formatting issues with smaller devices. I suggest switching your Text Blocks to HTML Blocks and some CSS so you can center your text on desktops and remove the "extra spaces" on smaller devices. As an example, add this to each of your Text Blocks:

<div class="text-container">
  <p>Paragraph here.</p>
  <p>Paragraph here.</p>
  <p>Paragraph here.</p>
</div>

Add this to to the CSS section:

.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 500px; /* height of photo block */
}

@media ( max-width: 736px ) {
  .text-container {height: 100%;}
}

Note that you need to change the height: 500px; to match the height of the Photo Block in each of your sections if you are trying to center the text. If you don't want to have that text centered, then remove the CSS stuff.

Good suggestions. I will work on that. FWIW.., a couple screen caps from the iPhone attached here. The one where the text block was created to fall above the image block, the text displays as though it's a significantly larger font employed than the one where the text block was added to the left of the image block.