College Landscape cover photo

TallPhotoGuy

With a College Landscape Gallery the cover photo covers 100% of the page, which is ok. I want to move the photo down to see some faces. how do I xo that. I think there is some CCS code.
Also - is there a way to change the vertical size of the cover photo box
Also2 - The cover photo is a horizonal banner. Is there any way to make it a vertical banner. San you wanted a flagpole picture

Hikin' Mike

@TallPhotoGuy said:
With a College Landscape Gallery the cover photo covers 100% of the page, which is ok. I want to move the photo down to see some faces. how do I xo that. I think there is some CCS code.

No need for custom CSS, there is a reposition icon top right corner:

JoMel

What is the CSS Code to make changes to the cover photo of the College Landscape Gallery
I want to make a border to just this Image, not to the others in the gallery, but don´t know how

Allen

Try this

.sm-gallery-cover[data-show-image="true"][data-tile-spacing="12"] {
    max-width: 98.55%;
    border: 10px #999 ridge;
}

If you change border width, 10px, adjust the max-width so the right margin equalizes with the left margin.

BTW, when I scroll to the top I see an ghost image in the background.

JoMel

Hi Allen,

thanks for the code, but this don`t work. It makes a border, but don`t round the corners.
I then tried to change the code to

border-radius: 10px

but this also don`t work.

Allen

Try this with the border added to the rule.

.sm-gallery-cover[data-show-image="true"][data-tile-spacing="12"] {
    max-width: 98.55%;  /* adjusts right margin space to equal left side */
    border: 10px #999 ridge;
    border-radius: 20px
}

There are about 4-5 different border styles you can use.
Border Styles
dotted, dashed, double, groove, ridge, inset, outset
https://developer.mozilla.org/en-US/docs/Web/CSS/border

Allen

deleted

JoMel

I don`t want a border, just rounded corner but gave your code a try.
It works but with a border so I changed the code to:

.sm-gallery-cover[data-show-image="true"][data-tile-spacing="12"] {
max-width: 98.55%; /* adjusts right margin space to equal left side */
border-radius: 20px
}

Now everything is like I want it to be - Thanks

Allen

If you're just doing the radius you don't need the max-width.
max-width: 98.55%;

Chane to this. The square corner of the slideshow button shows with the corner radius of the image added.

.sm-gallery-cover[data-show-image='true'][data-tile-spacing='12'],
.sm-gallery-cover-container .sm-button-size-large {
 border-radius:20px
}

JoMel

Perfect - Thanks