Collage Landscape container width

geohsia

Hi,
I am trying to figure out how to define the width of the photo portion of my landscape collage. I've constrained the title and the gallery description.

http://geohsia.smugmug.com/Website/Photo-Essays/Lizboa/

Can someone help me understand the container?

Also, my page looks fine on the mobile but there seems to be a margin that is shiftting everything off to the right. How do I control that mobile margin? I want it to be 0 for mobile devices. I think this might be padding not margin but I'm not sure.

Also, how do I find out some of these things on my own? I feel bad asking questions of the forum for every attribute. Thanks.

Hikin' Mike

Not sure I understand what you're doing about your first question, but I'm going to guess you want this:

.sm-gallery-tiles-container {}

I don't own a mobile device, so I really can't help. If you knew what specific margin, and what size your mobile device is, you can add something like this where .something-here is what 'container' you want and put the margin or what ever else between {}. I use 'max-width:799px' on my site "just because" it works good for my design.

@media only screen and (max-width: 799px) {
    .something-here{}
}    

I use 'Firebug' from Firefox to find HTML/CSS issues.

geohsia

Thanks Mike. The first container worked fine.

On the second question if you resize your browser window thin (less than 640px) you'll see that for some reason the Gallery description is shifted right. I can constrain the description to 90% which works to keep it in the window frame but I'd rather just leave it at 100% and figure out how to make it flush to the right.

Thanks for the firebug tip. Will check it out!

Hikin' Mike

geohsia wrote: »

Thanks Mike. The first container worked fine.

On the second question if you resize your browser window thin (less than 640px) you'll see that for some reason the Gallery description is shifted right. I can constrain the description to 90% which works to keep it in the window frame but I'd rather just leave it at 100% and figure out how to make it flush to the right.

Thanks for the firebug tip. Will check it out!

I tried that on my XP using FF and I didn't see any issues. I also used this: http://quirktools.com/screenfly/#u=http%3A//geohsia.smugmug.com/Website/Photo-Essays/Lizboa/&w=600&h=1024&a=23&s=1 and I didn't see anything wrong either.

Can you post a screen print?

geohsia

Hey Mike,
Here's an example:



It would be great to either:

a) reduce the margin to 0 and shift everything to the left. The text area would be flush on both sides. Right now you see the text extends to the right off the window.
b) Figure out how I can add the offset margin on the right so that the text area sits properly in the window

Thx.

Hikin' Mike

Are you sure your left and right margins the same on your mobile device? Looking at your screen print, and the Screenfly link I posted, it looks like you centered the screen correctly....no right-shifting.

You can try this:

@media only screen and (max-width: 640px) {
    .sm-gallery-description {
       padding: 0;
       margin: 0;
    }
}

geohsia

Hi Mike,
I've looked at options you mentioned. The margin (outside) is the same for the Gallery description as it is for the photos below. I think there is a container outside of the Gallery description that is causing the shifting. If you look to the right of the Gallery description you see that there is no margin (extends off the page)

Sorry by Margin I mean the spacing outside of the Gallery Description. The padding inside the text area is fine.

Hikin' Mike

There is this:

.sm-gallery {
    margin: 0 12px 12px;
}    

Hikin' Mike

To add...

That is the container of both the description text and the gallery thumbnails.

geohsia

Hmm. Interesting. The gallery description still extends to the right. Is this a bug?

Hikin' Mike

geohsia wrote: »

Hmm. Interesting. The gallery description still extends to the right. Is this a bug?

No idea, sorry.

geohsia

Haha. Thanks Mike. I really do appreciate the help as I'm not much of a programmer. Hopefully someone from Smugmug can help.