Uniform size/spacing of homescreen photos?

ajava · October 27, 2014

Depending on the size of the monitor used for viewing my site, the spacing/sizing of the three pictures on my homepage shifts around. I would think that the pictures should be uniformly sized and spaced across the width of the page, no matter what size monitor being used. How can I control that behavior?

I recently bought a new 24 in monitor and I was shocked to see how askew those three photos are presented. And on a small monitor, only two photos are displayed side by side, and the third wraps around to a new row. Very unprofessional looking for potential clients.

Here is a link:

http://mysite.winterwoodphotography.com/

Anything I can do to change this? Thanks!!

Steve Cavigliano · October 27, 2014

Hi ,
If you have "stretched" your site, we fill the screen, no matter the size monitor or browser window being used : http://legacyhelp.smugmug.com/customer/portal/articles/103958 Go into the Layout tab and select "stretchy" versus fixed. This should correct the issues you are seeing. Also make sure your browser is set to 100% zoom. If not, that can cause photos to wrap or display oddly.

Cavig
:cavig

leftquark · October 28, 2014

Hi Andrea,
You have some stunning photos on your site! Wow! You could try Steve's suggestion, however, that will limit your page from filling up the full width of the screen. Instead, here's a few hints with your current page:

You've set your photos to display 1:1 in the grid, which means they're trying to display square. Because you've set them to LARGE grid images, the photos either have to be cropped or displayed with some space on the side. We opted for space on the side. You could crop the image yourself so it's square and upload that or .... you can use the current image and just tweak the display using CSS. To get rid of the space on the side and push the image left so it's spaced properly you can use the following code:

/* Move the 3rd image so it's aligned with the first two */
.sm-page-widget-469645 .sm-tile-photo:nth-of-type(3) img {
  margin-left: 0px !important;
}

In regards to the wrapping on the 3rd row. We try very hard to make your site responsive (meaning: "work with any size screen) with the settings and layout you've chosen. The site can't fit 3 large images when the screen width gets below ~1030px. Typically one could make the images smaller so they could fit but in this case the large setting means we scroll the images to a new row instead of shrinking them any more. Between 510px wide and 1030px it looks like the site tries to put the images on 2 rows. You could write a few custom CSS lines to clean this up for small screens. For example, you could force the images to be smaller ... force them to go on their own rows, etc. This should get you started:
http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

-Aaron

ajava · October 28, 2014

Thank you so much!!

leftquark wrote: »
Hi Andrea,
You have some stunning photos on your site! Wow! You could try Steve's suggestion, however, that will limit your page from filling up the full width of the screen. Instead, here's a few hints with your current page:

You've set your photos to display 1:1 in the grid, which means they're trying to display square. Because you've set them to LARGE grid images, the photos either have to be cropped or displayed with some space on the side. We opted for space on the side. You could crop the image yourself so it's square and upload that or .... you can use the current image and just tweak the display using CSS. To get rid of the space on the side and push the image left so it's spaced properly you can use the following code:
/* Move the 3rd image so it's aligned with the first two */
.sm-page-widget-469645 .sm-tile-photo:nth-of-type(3) img {
  margin-left: 0px !important;
}
In regards to the wrapping on the 3rd row. We try very hard to make your site responsive (meaning: "work with any size screen) with the settings and layout you've chosen. The site can't fit 3 large images when the screen width gets below ~1030px. Typically one could make the images smaller so they could fit but in this case the large setting means we scroll the images to a new row instead of shrinking them any more. Between 510px wide and 1030px it looks like the site tries to put the images on 2 rows. You could write a few custom CSS lines to clean this up for small screens. For example, you could force the images to be smaller ... force them to go on their own rows, etc. This should get you started:
http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations

-Aaron

I added the suggested code and the pictures are now at least spaced evenly. I guess I won't worry about the varying monitor sizes right now - I'm happy just to have the pictures spaced properly. I really appreciate your detailed answer!! Thank you!!

Uniform size/spacing of homescreen photos?

Comments