My website doesn't display well on mobile

mrhoni

Here is the link to my post in the Smugmug New Customization section. My website looks fine on my desktop but once I look on my iPhone and iPad in portrait and landscape orientations the main thing I see is that photos don't stay within the cream colored page body.

http://www.dgrin.com/showthread.php?p=2020764#post2020764

Unsure if Smugmug people look in that forum section, so I'm posting here.

leftquark

Hi Keith,
It looks like the HTML you used to create the photo of the dog on the railroad tracks doesn't take into account the width. I'd recommend giving the "

" that it's in a width of some percentage, so that it will restrict the photo to that width on any screen. Right now it's set to load the entire image.

mrhoni

leftquark wrote: »

Hi Keith,
It looks like the HTML you used to create the photo of the dog on the railroad tracks doesn't take into account the width. I'd recommend giving the "<div>" that it's in a width of some percentage, so that it will restrict the photo to that width on any screen. Right now it's set to load the entire image.

Could you please explain a little more on the syntax and where it goes. Thanks

leftquark

I've updated your HTML to set the width of the container to 25% and then the image to fill that width:

    <div class="myPhotoLinks" [COLOR="red"]style="width:25%;"[/COLOR]>
      <img src="http://www.mrhoni-photography.com/photos/i-dz5qvch/0/M/i-dz5qvch-M.jpg" title="" alt=""[COLOR="red"] style="width:100%;"[/COLOR]>
   </div>

Have you tried using a Single Photo Content Block to the left of that HTML block with the photo instead? It would remove the need to add the photo in via HTML and you could then easily select the photo (or change the photo in the future). Setting it to 25% and letting us handle the rest might be easier.

mrhoni

Thank you, that seems to work. I changed the width to 50% vs 25% to make the image larger. I updated the full Home page with this change and looked at both landscape and portrait on my iPhone and iPad and it looks to be the fix.

I did try inserting a photo to the side of the text, but the results did not look as good as I wanted. The "style" feature looks better.