Website doesn’t display properly on Mobile

DanielW

Hi, my Smugmug pages don’t display properly on mobile phones. The photos are very wide and run off the page. Any tips on how to fix it? An example is below:

https://www.dsw-photo.com/Travel/Nine-Days-In-Norway

Hikin' Mike

Why aren't you using Folders and Galleries? Using what SM designed will eliminate adding more code.

Looks like you are using on HTML/CSS block and adding all of those images. I don't think I would have done it that way, but since this is what you're doing just add this in the CSS section in the HTML/CSS Block: img {max-width: 100%;}

leftquark

The better thing to do would be to remove the HTML and instead add a Multi-Photos content block with all of those photos. Or better yet, just create a gallery with them -- obviously they live in a different gallery, but you could create a gallery called "Nine Days in Norway" and then just "Collect" the specific photos you wanted into it.

DanielW

@Hikin' Mike said:
Why aren't you using Folders and Galleries? Using what SM designed will eliminate adding more code.

Looks like you are using on HTML/CSS block and adding all of those images. I don't think I would have done it that way, but since this is what you're doing just add this in the CSS section in the HTML/CSS Block: img {max-width: 100%;}

Thank you, now fixed:)!

DanielW

@leftquark said:
The better thing to do would be to remove the HTML and instead add a Multi-Photos content block with all of those photos. Or better yet, just create a gallery with them -- obviously they live in a different gallery, but you could create a gallery called "Nine Days in Norway" and then just "Collect" the specific photos you wanted into it.

My photo trip reports have text also. I don't think this is possible with a gallery(?).

E.g. my North Korea Trip below:

https://www.dsw-photo.com/Travel/A-Tourist-In-North-Korea

denisegoldberg

@DanielW said:
My photo trip reports have text also. I don't think this is possible with a gallery(?).

Galleries can have text as photo titles and captions.

Here is an example of a gallery using the Journal style, https://www.denisegoldberg.com/Travel-stories/Wandering-assisted-by-2-feet/. In this case I used a gallery description and a photo caption.

Here is another example of a Journal style gallery, this time using both photo title and caption, https://www.denisegoldberg.com/Fragments/Top-photos-2018/.

leftquark

Even if you didn't want to use the photos' captions as the way to tell the story, it'd still be better to build this page using the multiple or single photos content blocks. That way you don't have to generate your own HTML and everything will work much better and take advantage of the power of SmugMug. For example, we'll select the right image size to display for the screen, we'll make sure it fits the screen properly, people can click on the photo to open it larger, etc.