Targeting element with CSS

Support
#1

I cannot seem to edit a portfolio feature with CSS. If you go to the link http://dev.lakesroadglass.com/shower-doors/ and hover over the portfolio items, a white element transitions from the left and covers the image. I want to change the opacity of this from 95% to something much less.

In addition, the text “Image” and the date of the post appears above and below the title and I want to remove these items by setting them to display: none;

Even though I am able to identify the correct CSS path, using Chrome’s Inspect Element tools, when I enter the CSS into Pro it has no effect. I seem to have this problem a lot with X (including Pro). Any advice you can provide will be appreciated.

Michael

#2

Hi Michael,

Here’s a guide:

If a certain CSS is not working, possible reasons are either CSS specificity or CSS syntax error. On your case it is syntax error:

@media screen and (max-width:420px) {
    .e22-1.x-bar {
        height: 90px;
    }
    @media screen and (max-width:420px) {
        .e22-3.x-image {
            width: 150px;
            margin: -10px;
            padding: 0px;
        }
    }
    @media screen and (max-width:420px) {
        .e22-2.x-bar-container {
            width: 160px;
            padding: 0px;
            margin: 0px;
        }
    }
    @media screen and (max-width:420px) {
        .e22-7.x-text {
            font-size: 9px !important;
            margin: 0 25px 0 0;
        }
    }
    .x-portfolio .entry-cover-content span {
        display: none !important;
    }
    .x-portfolio .entry-cover {
        background-color: rgba (255, 255, 255, 0.1) !important;
    }

Look for the firs media query. It’s closing bracket is missing. All CSS after that will not work. Please add the closing bracket and try again.

#3

OMG, I’m soooo embarrassed. Thank you so much
:persevere:

#4

We are delighted to assist you with this.

Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.