CSS box problem on 1368 x 768 resolution

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 6 months ago

    I cannot replicate the problem. Which browser & browser version do you see this in?

    Thread Starter pyramisa

    (@pyramisa)

    10 years, 6 months ago

    Actually I think I got it fixed by removing the fixed size in pixels for the class –

    .h1-bg{
    background-color:rgba(0,0,0,0.1);
    width:100%;
    height:100%;
    }

    the main problem now is that my darker transperant layer is only covering 1/3 of the box. I have no idea why.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 6 months ago

    The overlay is applied to the link and the link doesn’t have 100% height. Is the link supposed to be 100% height?

    Thread Starter pyramisa

    (@pyramisa)

    10 years, 6 months ago

    Nope, the only thing I want is the overlay to cover the whole box.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 6 months ago

    Are you using a browser tool like Firebug? The element you want to target is the one that specifies the height of the box:

    .cmsms_featured_block .featured_block_inner

    To achieve an overlay, try this:

    .cmsms_featured_block .featured_block_inner {
    position: relative;
}

.cmsms_featured_block .featured_block_inner:before {
    background: rgba(0, 0, 0, .5);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.cmsms_featured_block .featured_block_text {
    position: relative;
}

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS box problem on 1368 x 768 resolution’ is closed to new replies.