apply css to just a specific element

cmessall · July 28, 2018

I've figured out how to apply Text over images using css (Using the Title & Caption of images). But if I have 2 or more images on the same page the css styles apply to both those images. I can't figure out how to use the ID's and CSS to apply different styles to each one.

For example: this style will position the text left 5%
.sm-tile-info {
background-color: rgba(150,150,150,0)!important;
font-size: 3vw !important;
line-height:1.2;
position: relative;
top: 10%;
left: 5%;

...and I'd like to position the text left: 50% for the second image.

any help on how to achieve this would be very much appreciated.
Thanks!

Hikin' Mike · July 28, 2018

You need to find the specific widget number using one of the web tools. Once you find that it will look something like this, when xxxxxxxx is the specific number.

.sm-page-widget-xxxxxxxx .sm-tile-info {
    /* code here */
}

If you still can't figure it out, you need to post your site/page. Since you're a new member, you will have to type in your site/page without the http://. As an example 'yourwebsite.com'.

apply css to just a specific element

Comments