Header with Gallery List

AzuleOnyx

I am helping my wife work on her SmugMug page. If you go to the page, the 3 galleries list next to the profile information is too far to the left. However, I can't move it. She wants the galleries line up that way but needs to be push over. If I make the column less then 40% wide, the list stacks instead of moves over. At 10% (or there abouts), the 3 galleries stack at the edge of the screen.

There must be some CSS trick to get this to work. If I use the dev tools in chrome, I could get it to look right at 78%/22% but those will not work in the SmugMug editor and the values are hard coded from the editor to the HTML on the page. I attempt to over-write the width using CSS, but that doesn't work right even using `div[column=0]' or even 'div[style]'.

Anyone have clue on how to get this to lay out right and move those to the right, so the "Weddings" gallery is at the end of the window when the window is expanded?

leftquark

You can either drop a CSS content block on the bottom of the page or add this in Customize -> Customize Site -> Theme -> click the wrench next to your theme name -> Advanced, and at the very bottom choose "Custom CSS" and click "Edit"....

/* Move the menu left */
.sm-page-widget-8356928 {
  position: relative !important;
  left: [COLOR="Red"]-10%[/COLOR] !important;
}

You can change the value of how much it moves left by changing the part in red. Make sure the value is negative to move it left.

Keep in mind that this will present some problems on smaller screens as it will cause it to overlap with her "sapphire light photos" logo.

One way to change things would be to go into the customizer and give less width to the logo and more to the menu. Just make sure to click the ruler icon next to the logo content block and make the width % smaller. Of course this is also screen width dependent ... on a smaller screen things will have to wrap. It's tough when you're trying to make many wide things fit on a small screen.

AzuleOnyx

I am going to look at this in a bit. I know about the stacking on the smaller screen. I need to look at that as well but for now I am just trying to fix a 'normal' size screen.

AzuleOnyx

Btw, I have this to get the size of the links:

.sm-tiles-row-organic .sm-tile-wrapper {
 width: 138px !important;  
}

.sm-tiles-row-organic .sm-tile a {
  height: 92px !important; 
  width: 138px;
}

This located in a CSS block in the header. Is this the proper way to do this? Or should I be doing something else?

leftquark

AzuleOnyx wrote: »

Btw, I have this to get the size of the links:

.sm-tiles-row-organic .sm-tile-wrapper {
 width: 138px !important;  
}

.sm-tiles-row-organic .sm-tile a {
  height: 92px !important; 
  width: 138px;
}

This located in a CSS block in the header. Is this the proper way to do this? Or should I be doing something else?

That's one (good) way to do it ... and seems to be working fine! Good work on figuring it out!

AzuleOnyx

Thanks! I am "ok" with CSS. I have been out of it a while. =D

Anyway, did a number of other changes and wife likes it. Thanks for the help!