Photo Gallery "Center" on The Page Help

I’m new to RapidWeaver, I’m using release 7.3.3, and ran into an issue with the photo gallery. I started a new project with a few pages of text and a few pages where I selected a photo gallery. This is a very basic website that I am building. The issue is that the photo gallery is not centered on the page. The photo gallery is set to be a slideshow. You would think there would be a setting in the “Inspector” panel to center the slideshow, but there isn’t. I’m using the Modern Grunge theme, and I cannot figure out how to center the gallery on the page. I have hidden the side bar because I don’t need it. Can someone help me figure out what to do? The gallery is defaulting to the left side of the page and it just doesn’t look great on the page without being centered. Is there some CSS code or something that I’m missing?

Sidebar is enabled by default and if you are not using for anything, just hide it. To do that go to the Sources List on the left of your edit page & scroll down to Master Style and select it. Now click on one of the Inspector icons on the top right side of your edit screen and scroll down to Sidebar and select Hide.

Thanks, The sidebar was easy to figure out. I just need to figure out how to center the photo gallery on the page and I will be done.

link? screenshot? Hard to help without.

1 Like

It’s not a live website, so I don’t have a link. Here is a screenshot so you can see what I’m talking about.

Screen Shot 2017-04-17 at 5.52.45 PM

Need the settings for the slideshow. Click on the slideshow stack and screenshot the settings in the panel.

Looks like you are using the included photo album plug in?

If so try adding this CSS to the page:

#monoslideshowHolder {
	margin: 0 auto;
}
2 Likes

Doug, your are a genius! that was exactly what I needed. That centered the slide show on the page. Thanks for your help!

1 Like

Hi Everyone!

I seem to be having the same issue as Greg (Gallery not centered).
Doug, I read your fix mentioned above…

#monoslideshowHolder {
margin: 0 auto;
}

However, I am not sure of where to place the code. Do I enter the code in the CSS field or another field via Inspector? Any chance you or Greg can upload a screenshot?

Thanks for the continued help on this issue and for clarifying!
Sophia

That’s CSS, so add it into the page inspector on the right. There’s a section for code > css

Hi Doug,

Thanks for reaffirming. I did just that. I tried the code on several pages (that have the slideshow issue) and the code (fix) did not propagate after republishing and reuploading file through Filezilla to host server. I’ll try again tomorrow or this weekend to see if I can get it to work. I’m using Rapidweaver 8. I’ll be sure to let you know if it works this time.

Thanks for helping!

Appreciated,
Sophia

Doug, the code works. I had to clear my history; pages weren’t refreshing. All is good now.

Thanks again!
Sophia : )

Hi,

I’m having the same problem but with the Gallery option. The Slideshow fix works ok, but the Gallery stays off-centre or ranged left (no sidebar turned on). I tried substituting the word “Slideshow” for “Gallery” in the code, but it made no difference. I should say I know almost nothing about code. Can it be fixed? And why is it like this? It seems odd that centred wouldn’t be the default position anyway.

Thank for looking.

Lee

It’s best if you can provide a URL to at least a test page.

I’m not sure how to do that without publishing it. I’m encouraged that this isn’t a recognised fault though. Here’s an image of the page. It happens in all themes, with and without sidebars.
EDIT: Thank you for looking!

You would need to publish the page. The fix may be theme dependent.

To publish a test page that won’t show up on the main site.

Give the folder an easy name and remove the checkmark “show in navigation”:
2020-01-16_04-51-26

Uncheck the Index this page and follow links:
2020-01-16_04-50-34

Then publish as you normally do.

2 Likes

I’ve published it now. I’m thinking I can replace it with my actual site afterwards…

https://leemontgomery.co.uk/#

Try adding this CSS:

.thumbnail-wrap {
   margin: 0 7px 12px 7px;
}
.album-wrapper {
   margin: 0 auto;
}

I was about to say that hasn’t centred it… but it has, depending on the page width. Excellent! The phone simulations are still wonky though, depending on the phone you choose. Maybe a responsivity glitch or something it isn’t designed for? I’m still curious about why this doesn’t work out of the box as it were…

Thank you very much for this. Much appreciated, Doug.