My website doesn't display well on mobile
mrhoni
Registered Users Posts: 173 Major grins
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.
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.
0
Comments
Have you set those pages, etc to "Stretchy"
Customise > Content and Design > Look in the "LAYOUT" tab
www.acecootephotography.com
Yes all stretchy.
http://mrhoni-photography.com
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
Musings & ramblings at https://denisegoldberg.blogspot.com
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;
}
http://mrhoni-photography.com
On my phone in landscape it display similar to what I showed in previous reply of my iPad in portrait
http://mrhoni-photography.com
No matter though, I still think you need someone from SmugMug to take a look at the reason the photos aren't resizing.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
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?
http://mrhoni-photography.com
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
Musings & ramblings at https://denisegoldberg.blogspot.com