My website doesn't display well on mobile

mrhoni · January 1, 2016

Don't know if this is something anyone here can help with. If you can help, please let me know what you might need from me to help you help me.

Some things I notice when I look at my website on my iPhone 6 plus or my iPad Pro (could be the same on smaller phones and iPads).

- On the iPhone in portrait mode, the photos I embed into the pages get chopped off on the left or right depending upon which side of the page to place the photos. These are medium sized photos. Small size worked better but on the desktop I thought they were too small.
- I also notice the pages are set off to the left side of the screen. Like 2/3 of the page is my text and 1/3 to to the right is my background vs having background even amount on both sides of the box area where I have all my text and images
- On the iPad portrait mode, the look is similar to the iPhone in that the section with the text is a bit narrow, but in this case, the menu is on the left side and there is a fairly even amount of background on the right.
- On the iPad landscape mode, the layout looks more like my desktop and the embedded images stay within the text section, whereas in portrait mode, just like on the iPhone, they extend into the background area.

AceCo55 · January 2, 2016

Just to eliminate the simplest solution.
Have you set those pages, etc to "Stretchy"
Customise > Content and Design > Look in the "LAYOUT" tab

mrhoni · January 2, 2016

AceCo55 wrote: »

Just to eliminate the simplest solution.
Have you set those pages, etc to "Stretchy"
Customise > Content and Design > Look in the "LAYOUT" tab

Yes all stretchy.

denisegoldberg · January 3, 2016

The pages that show this problem appear to be the ones where you have placed a photo on the page with text around it.

The only pages on my site that show a combination of text and photos are my About page and my Kaleidoscope page. In those pages the photos are in a Multiple Photos or in a Folders, Galleries, and Pages box, and they both display properly on a phone.

I see the problem on your site on your Pricing and Info pages. How did you place the photos on those pages? I'm guessing that using a photo content block applies re-sizing appropriate to the device but that perhaps explicitly specifying a photo size does not. Keep in mind this is just a guess!

I wonder if it is worth trying a test using a combination of photo and text content elements instead of using CSS and referencing exact photo urls. This won't give you the same look since the text won't wrap around the photo - but you can specify side-by-side content blocks. I guess I'm just curious to see if photos displayed in this manner resize appropriately for mobile viewing.

Hopefully someone from SmugMug will jump in with the correct answer.

--- Denise

mrhoni · January 3, 2016

Denise,

Below is code from an html section of my Home page. I do this on almost every page for inserting photos.
I do this so I could alternate photos on the left and right of the text for the pages .

I took your suggestion and in the below code I removed the img src and used multiple photos to insert the image of the 2 girls with their dogs. I set the photo size to large and container to 60%. While the image no longer extends to where it should not, I still have the issue with the cream colored box where all my text and images go being very narrow and doesn't display evenly in portrait or landscape on my phone. This unevenness shows on my iPad Pro as well in portrait. Landscape looks fine.
Here is what it looks like now

<div class="boxBottom">
<div class="myPhotoLinks">
<img src="http://www.mrhoni-photography.com/photos/i-FzLHwZW/0/M/i-FzLHwZW-M.jpg" title="" alt="San Jose, Morgan Hill, Gilroy, Campbell, Scotts Valley, Los Gatos, Saratoga, Monte Sereno, Los Altos, Los Altos Hills, Santa Clara, Sunnyvale, Milpitas, Fremont, Cupertino, Mountain View, Palo Alto, Atherton, Menlo Park or Redwood City"> </div>
<div class="myTextLinks">
MrHoni Photography is based in San Jose, California. Photo sessions are on-location vs a studio. Together, we’ll decide what location is best for you.
</div>

This is the class

.myPhotoLinks {
float: left;
padding-right: 20px;
}

.myPhotoLinksRight {
float: right;
padding-left: 20px;
}

mrhoni · January 3, 2016

This is how it displays on my iPhone in portrait

On my phone in landscape it display similar to what I showed in previous reply of my iPad in portrait

denisegoldberg · January 3, 2016

mrhoni wrote: »

...I took your suggestion and in the below code I removed the img src and used multiple photos to insert the image of the 2 girls with their dogs. I set the photo size to large and container to 60%. While the image no longer extends to where it should not, I still have the issue with the cream colored box where all my text and images go being very narrow and doesn't display evenly in portrait or landscape on my phone.

That wasn't quite what I meant. My suggestion was to try a page - maybe unlisted, just to experiment - where you place photo and text content blocks on the page without using any CSS. I'm curious to know if the photos resize properly with that structure.

No matter though, I still think you need someone from SmugMug to take a look at the reason the photos aren't resizing.

--- Denise

mrhoni · January 3, 2016

denisegoldberg wrote: »

Tbut you can specify side-by-side content blocks.
--- Denise

Denise,
Are side-by-side content blocks what I did, where I added the photo block and placed it to the left of the html block?

denisegoldberg · January 3, 2016

mrhoni wrote: »

Are side-by-side content blocks what I did, where I added the photo block and placed it to the left of the html block?

Yes, but without any CSS specification. I don't know what you have in the HTML block - you referenced one with CSS in use above.

You might want to consider using a different sized logo on your site for mobile. On my phone your logo, menu (1 line entry), and social icons take up three quarters of the space available if I hold the phone in portrait mode. In landscape, only your logo shows. Take a look at Change Features for Mobile or Tablet Browsers for a starting point.

--- Denise

My website doesn't display well on mobile

Comments