Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 12, 2024 at 3:33 pm #1473500
    raslade

    Hi there

    I’m using the fixe frame layout and need to add a line on the inside of the border. I’ve achieved it but alas due to the position property none of the links on the page work. Here’s my code:

    .av-frame.av-frame-top.av-frame-vert:before {
    content: '';
    left: 30px;
    top: 30px;
    height: 50vh;
    width: 50vw;
    border-top: 1px solid #102f5d !important;
    border-left: 1px solid #102f5d !important;
    position: absolute;
}
.av-frame.av-frame-right.av-frame-hor:after {
    content: '';
    right: 30px;
    top: 30px;
    height: 50vh;
    width:50vw;
    border-right: 1px solid #102f5d !important;
    border-top: 1px solid #102f5d !important;
    position: absolute;
}
.av-frame.av-frame-bottom.av-frame-vert:after {
    content: '';
    right: 30px;
    bottom: 30px;
    width: 50vw;
    height: 50vh;
    border-right: 1px solid #102f5d !important;
    border-bottom: 1px solid #102f5d !important;
    position: absolute;
}
.av-frame.av-frame-left.av-frame-hor:before {
    content: '';
    left: 30px;
    bottom: 30px;
    height: 50vh;
    width: 50vw;
    border-left: 1px solid #102f5d !important;
    border-bottom: 1px solid #102f5d !important;
    position: absolute;
}
    December 13, 2024 at 5:03 am #1473530
    Ismael

    Hey Richard,

    Thank you for the inquiry.

    Where can we check this? It’s possible that the pseudo-container is covering the entire content. You might need to adjust the z-index or apply an inner shadow without blurring. Please check this link: https://css-tricks.com/snippets/css/css-box-shadow/#aa-inner-shadow

    Best regards,
    Ismael

    December 13, 2024 at 11:24 am #1473561
    raslade

    Hi Ismael, thanks for the possible solution and I have tried the following but with limited results the border extends to far.

    The dev site is below, thanks.

    .av-frame.av-frame-top.av-frame-vert {
      box-shadow: 0 -29px 0px 30px black;
}
.av-frame.av-frame-bottom.av-frame-vert {
    box-shadow: 0 8px 0px 9px black;
}
.av-frame.av-frame-left.av-frame-hor {
    box-shadow: 0 0px 0px 1px black;
}
.av-frame.av-frame-right.av-frame-hor {
    box-shadow: 0px 0px 0px 1px black;
}
    December 14, 2024 at 5:02 am #1473607
    Guenni007

    add to your css of first post :

    .av-frame:before,
.av-frame:after {
  pointer-events: none;
}

    i do not see your site – but with the demo : “Enfold Hotel” i made some tests in dev tools.
    There is always a shift of bottom lines. Some browsers have that border/height 1px difference – so mybe it would be better to position all in relation to the top position.

    December 14, 2024 at 6:00 am #1473609
    Guenni007

    i guess – as the frames – it will be better for positioning to choose display : fixed
    I don’t know how the vw unit reacts to the scroll bar thickness. However, it seems to be the case that this must unfortunately be taken into account. For this reason alone, it is important to align all four pseudo containers to the top left.
    for the mentioned Demo this works in all browser i do have on my Mac (FF dev, FF, Safari, Chrome)

    .av-frame:before,
.av-frame:after {
    pointer-events: none;
    display:block !important;
}

.av-frame.av-frame-top.av-frame-vert:before {
    content: '';
    left: 30px;
    top: 30px;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-top: 1px solid #102f5d !important;
    border-left: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-right.av-frame-hor:before {
    content: '';
    left: calc(50vw - 8px);
    top: 30px;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-right: 1px solid #102f5d !important;
    border-top: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-bottom.av-frame-vert:before {
    content: '';
    left: calc(50vw - 8px);
    top: 50vh;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-right: 1px solid #102f5d !important;
    border-bottom: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-left.av-frame-hor:before {
    content: '';
    left: 30px;
    top: 50vh;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-left: 1px solid #102f5d !important;
    border-bottom: 1px solid #102f5d !important;
    position: fixed;
}

    if you got a different frame width than 10px we had to adjust some settings.

    December 15, 2024 at 4:29 pm #1473683
    Mike

    Hi,
    As I understand, this is what you want to remove:
    Screen Shot 2024 12 15 at 10.22.22 AM
    when I test Guenni007’s css it seems to work:
    Screen Shot 2024 12 15 at 10.27.49 AM

    Best regards,
    Mike

    December 16, 2024 at 12:00 pm #1473747
    raslade

    Hey Mike, yes please and I’ve not tested the other suggestions yet. If the over extension of the border can be fixed with CSS then that solves the issue. Any ideas very much appreciated.

    December 16, 2024 at 12:33 pm #1473753
    Guenni007

    as participant – i do not see your page – so hope Mike has a good idea. But keep in mind: better to place them fixed and to position them all top left.

    December 16, 2024 at 3:02 pm #1473760
    raslade

    Thanks all and the solution above works perfectly. Thank you Guenni007

    December 17, 2024 at 5:23 am #1473802
    Ismael

    Hi,

    Great! Glad to knowthat @Mike and @Guenni007 were able to help you out. If you have any more questions about the theme, please feel free to open another thread.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Fixed frame with 1px border’ is closed to new replies.