Community @ The Turning Gate

Hi Rod, ideally I want them to be centred on a desktop display, or alternatively the social icons moved left slightly so they align with the edge of the filmstrip - if I turn my ipad to portrait orientation everything centres perfectly.

Thanks
Steve

Having had a bit of a wild goose chase making this work on my iPhone yesterday (successfully!) I'm just puzzling over one or two desktop formatting issues for the footer. I'm very new to CSS and picking my way through it so sorry if there's something obvious here that I'm missing.

The footer is formatted perfectly when viewed on an iphone/ipad in portrait orientation, with the copyright text and social media icons centred: https://www.adecentexposure.co.uk

What I want to do is replicate that presentation on the desktop display, rather than having the copyright text to the left and the social media icons to the right. Alternatively I want to have the social icons more aligned to the right (so they're level with the fimstrip above). I think my CSS is pretty much as Rod's example, I've played around with some of the float and align settings but can't get this to work the way I'd like to:

footer {

background-color: #70bcea;
border-top: 1px solid black;
text-align: center;
}

.social-media-profiles ul {
float: left;
margin: 0 auto 1.5rem;
max-width: 157px;
padding: 0;
position: relative;
}

.social-media-profiles ul li {
float: right;
list-style-type: none;
/*margin: 0 4px 4px;*/
margin: 0 4px 4px;
padding: 4 4px;
background-color: #70bcea;
border-radius: 6px
}

.social-media-profiles a.social_media {
text-decoration: none;
color: white
}

#footer {
    padding: 12px 0;
}

@media screen and ( max-width: 1023px ) {

#footer {

padding: 0 4px 12px;

}
#footer p {

text-align: center;
}
.social-media-profiles ul {

float: none;
}
}

Thanks, great is someone could point me to what I should be looking at. https://www.adecentexposure.co.uk

Steve

Thanks for looking Rod. That's not the same for me and I've cleared the cache as well - mine's an iPhone 7, which one are you using?

Steve

Thanks Rod & Jim!

Wondering if a bug has crept in because I didn’t remember seeing this when I was initially setting the site up, but perhaps it’s always been like that?  I was hoping that the album would be constrained to match the copy width, but overall I like the look better than having the masthead constrained, so I’ll stick with it and republish the gallery images to remove the border.

Jim, thanks for the point re the left and right padding, I was just about to see what was causing that gap!

On an iPad /iPhone it looks fine. Thanks again for taking a look.
Steve

Thanks Rod,

So I've set the layout to max width and Content Area to 1150. There's no change to the size of the galleria album so it's still extended to the width of the screen (the same as the masthead). The text in the content area is reflecting the 1150px width though.

Is there anything I need to change in the galleria template? I can't see anything there that would reduce the width.

Steve

I;m sure I had this recently and you have to log out of the backlight console to make it update...I think

Thanks Rod, I’ll give these a try, I think using the page template will work ok. I shot an event last weekend and this was the first time I’ve put a live gallery up under backlight, so looking at fine tuning following customer feedback.

All of the css properties are a bit of a mystery at the moment, is there a list of them anywhere? Because of cancelled jobs (for the next three months by the look of it) I’ve got plenty of free time to get my head around this.

Steve

Perfect, thanks Rod!

.gallery figure:hover did the job.

One more question, a lot of my albums have up to 15 pages. What's the css to highlight the page number please?

Steve

Thanks Rod, I’ll take a look and see how I get on.

Site is www.adecentexposure.co.uk

Steve