Website doesn’t display properly on Mobile

DanielWDanielW Beginner grinnerPosts: 12Registered Users Big grins

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

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,300Registered Users Major grins
    edited April 12, 2019

    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%;}

  • leftquarkleftquark SmugMug Product Team Posts: 3,484Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited April 12, 2019

    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.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • DanielWDanielW Beginner grinner Posts: 12Registered Users Big grins

    @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:)!

  • DanielWDanielW Beginner grinner Posts: 12Registered Users Big grins

    @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

  • denisegoldbergdenisegoldberg Major grins North Andover, MAPosts: 12,315Super Moderators moderator

    @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/.

  • leftquarkleftquark SmugMug Product Team Posts: 3,484Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    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.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.