Rounded Corners - 3:1 Aspect Ratio Photos

Darter02

Currently I'm using CSS to round the corners of photos on my site. When I create a page, and place images on them I usually have Action on Click set to Open Lightbox.



On a page I was creating today I wanted three decorative 3:1 aspect ratio images to do nothing on click.



When I do this, the CSS I use stops working. It will only work if a photo is set to either open the lightbox or gallery.





The code I use is:

*rounded corners*/
.sm-page-widget-galleries .sm-tile a {
  border-radius: 10px;
}

/* ROUND THE EDGES ON GALLERY THUMBNAILS in Collage Galleries */
  .sm-gallery-roworganic img, .sm-gallery-columnorganic img {
    border-radius: 10px;
}

.sm-page-widget-folders .sm-tile a, .sm-page-widget-galleries .sm-tile a, .sm-page-widget-nodes .sm-tile a, .sm-page-widget-pages .sm-tile a {
  border-radius: 10px;
}

/*round corners to feed*/
.sm-feed .sm-feed-item-description a img {
  border-radius: 10px;
}

/* ROUND IMAGES DISPLAYED IN THE LIGHTBOX */
  .sm-lightbox-image {
      border-radius:25px;
  }

Any thoughts on why it does this?

brandofamily

It might have to do with these lines... I think the "a" in the code refers to a link... try removing the "a" maybe

 .sm-page-widget-folders .sm-tile a, .sm-page-widget-galleries .sm-tile a, .sm-page-widget-nodes .sm-tile a, .sm-page-widget-pages .sm-tile a {   border-radius: 10px; }  

.sm-feed .sm-feed-item-description a img {   border-radius: 10px; }  

Darter02

Removing the "a" broke the CSS for all of the pages using that particular theme. I think you're on the right track. I need to find out the class ID of an image tile that doesn't open a gallery or the lightbox.

I enabled right clicking for the middle, top image of the hemlock trees if any kind soul wants to help me figure it out...

Darter02

Today I'm having trouble sorting out how to round the corners of a 1:3 aspect ratio image. I enabled it to open the light box on clicking, but my CSS (the same code posted above) seems to have no effect. I can't seem to sort out the right code. Any ideas?

Here's the page, it's the only photo on it.

Darter02

Ugghhh! I gave up on it. I couldn't get to work on only one 1:3 image, but it works on a multiple image block of 1:3 images.