Trouble Centering Text

frisson

Hi,

I have a menu centered on my page and want to use CSS to center the gallery name under the menu.

I tried using this

/*Center the Gallery Title*/
.sm-user-ui .sm-gallery-cover .sm-gallery-cover-title, .sm-user-ui .sm-gallery-cover .sm-gallery-cover-description {
font-size: 30px;
color: black;
text-align: center;
}

However the text does not appear to be centered under the menu.

For reason beyond my understanding I am not allowed to post links. But if you google my name you can see an example gallery (try Radiance)

I am a neophyte CSSer, so would appreciate any help.

Thanks

Robert Boire

Hikin' Mike

You can't post live links because you are new. You can type in your name i.e 'yoursite.com' and that should be fine. Googling 'radiance' was not helpful.

denisegoldberg

@Hikin' Mike said:
You can't post live links because you are new. You can type in your name i.e 'yoursite.com' and that should be fine. Googling 'radiance' was not helpful.

Mike -
I think this is his site - http://www.robertboire.ca/Portfolio2/Radiance/.

Hikin' Mike

It really is centered based on the cover title's block. Because it's also inline with the slideshow. Add this to your custom CSS to change the default max-width: 85vw to 100%:

.sm-user-ui .sm-gallery-cover-info .sm-gallery-cover-title {
    max-width: 100%;
    }

Hikin' Mike

Thanks @denisegoldberg, I didn't see it on the first page and I wasn't going to search further.

frisson

Well... I do not know about being new... I have been a member of the forum since 2015. I suppose you mean not very active.

Thanks for the code, but it did not quite work. I must be missing something. The title pops to the center, briefly and then reverts back off center. And there is a new problem...the slide show icon on the right of the page has disappeared.

Here is the code I am using. Thanks for your help.

.sm-page-layout-region sm-page-layout-region-left {
min-height:100% important;
}
/*1.3 20-10-15 remove button for image size*/
.sm-button-image-sizes {
display: none;
}

/*Center the Gallery Title*/
.sm-user-ui .sm-gallery-cover .sm-gallery-cover-title, .sm-user-ui .sm-gallery-cover .sm-gallery-cover-description {
font-size: 30px;
color: black;
text-align: center;
}

/*Change max width to allow gallery title to center with slideshow button */
.sm-user-ui .sm-gallery-cover-info .sm-gallery-cover-title {
max-width: 100%;
}

.sm-button, .sm-button-size-large, .sm-button-skin-default, .sm-gallery-cover-slideshow-button:after {
content: "Slideshow" !important;
padding: 8px;
}

.sm-gallery-cover-slideshow-button {
color:black !important;
background-color: rgba(255, 255, 255, 0.9) !important;
}

Hikin' Mike

I didn't see the slideshow icon before either. You have code that hides it.

I made some changes, so remove this code:

.sm-page-layout-region sm-page-layout-region-left {
min-height:100% important;
}
/*1.3 20-10-15 remove button for image size*/
.sm-button-image-sizes {
display: none;
}

/*Center the Gallery Title*/
.sm-user-ui .sm-gallery-cover .sm-gallery-cover-title, .sm-user-ui .sm-gallery-cover .sm-gallery-cover-description {
font-size: 30px;
color: black;
text-align: center;
}

/*Change max width to allow gallery title to center with slideshow button */
.sm-user-ui .sm-gallery-cover-info .sm-gallery-cover-title {
max-width: 100%;
}

.sm-button, .sm-button-size-large, .sm-button-skin-default, .sm-gallery-cover-slideshow-button:after {
content: "Slideshow" !important;
padding: 8px;
}

.sm-gallery-cover-slideshow-button {
color:black !important;
background-color: rgba(255, 255, 255, 0.9) !important;
}

Use this instead.

.sm-page-layout-region sm-page-layout-region-left {
    min-height:100% important;
    }

/*1.3 20-10-15 remove button for image size*/
.sm-button-image-sizes {
    display: none;
    }

/*Center the Gallery Title*/
.sm-user-ui .sm-gallery-cover .sm-gallery-cover-title, 
.sm-user-ui .sm-gallery-cover .sm-gallery-cover-description {
    font-size: 30px;
    color: black;
    text-align: center;
    margin-left: 108px;
    }

.sm-user-ui .sm-button, 
.sm-user-ui .sm-button-size-large, 
.sm-user-ui .sm-button-skin-default, 
.sm-user-ui .sm-gallery-cover-slideshow-button:after {
    content: "Slideshow";
    margin-left: -40px;
    }

.sm-user-ui .sm-gallery-cover-slideshow-button {
    color:black;
    background-color: rgba(255, 255, 255, 0.9) !important;
    }

Because you display the Slideshowtext/icon, SmugMug adds this:

.sm-gallery-cover[data-show-slideshow=true] .sm-gallery-cover-info {
    padding-right: 108px;
    }

So I had to compensate by adding a margin-left: 108px; so your Gallery Title will center.

I also added a margin-left: -40px to your Slideshow text/icon so it will be inline (right side) to the thumbnails. I also added sm-user-ui before some of your code so you don't have to use the !important.

frisson

Thanks.

I had to change

margin-left: 108px;

to

margin-left: 250px;

to really center the text.

The only code interfering with the Slideshow icon seems to be the code with the Slideshow text itself. If I remove:

.sm-user-ui .sm-button,
.sm-user-ui .sm-button-size-large,
.sm-user-ui .sm-button-skin-default,
.sm-user-ui .sm-gallery-cover-slideshow-button:after {
content: "Slideshow";
margin-left: -40px;
}

Then the Icon appears.

So to keep the icon and the text, I replace the above with

.sm-user-ui .sm-button,
.sm-user-ui .sm-button-size-large,
.sm-user-ui .sm-button-skin-default,
.sm-user-ui .sm-gallery-cover-slideshow-button:after {
content: "Slideshow";
/* margin-left: -40px;*/
width: auto;

Note that I commented out the margin-left code. Otherwise the icon and the text overlap.

I would appreciate your thoughts. I do not know really what I am doing.

Hikin' Mike

I suggest you look at this on different screen sizes then: http://quirktools.com/screenfly/#u=http://www.robertboire.ca/Portfolio2/Radiance/&w=1024&h=600&s=1

You may have to re-think your design.

Hikin' Mike

Just a thought. If you want to center your Galleries titles, drag a title block on top of block that says "On ALL Galleries" and select 'Center' in the title section. Save it. Then you can hide the other title using CSS. Probably .sm-user-ui .sm-gallery-cover .sm-gallery-cover-title {display: none;} should do the trick.

Just don't fill in the title. It will automatically fill the correct title.