stillmorris Comments - Answer Overflow

stillmorris

Posts Comments

KPCKevin Powell - Community

•Created by FryBlaster on 10/15/2024 in #front-end

Make right sticky card disappear when it's close to the bottom

Hey @FryBlaster ! I think it's working fine now.

7 replies

KPCKevin Powell - Community

•Created by FryBlaster on 10/15/2024 in #front-end

Make right sticky card disappear when it's close to the bottom

I think so. Let me try it.

7 replies

KPCKevin Powell - Community

•Created by FryBlaster on 10/15/2024 in #front-end

Make right sticky card disappear when it's close to the bottom

Hi @FryBlaster, If I don't misunderstood anything, I think this could help with it: https://codepen.io/eloy1991/pen/rNXmNKm

7 replies

KPCKevin Powell - Community

•Created by nikobak on 6/12/2024 in #front-end

This works on Desktop, but Mobile it's deform... please help

Instead of using br tags I recommend the use of css margins. This tags could be so tricky and annoying sometimes.

15 replies

KPCKevin Powell - Community

•Created by nikobak on 6/12/2024 in #front-end

This works on Desktop, but Mobile it's deform... please help

Yes, of course! You need to override the width styling of you input selector with:

input[type=checkbox] {
  width: initial;
}

input[type=checkbox] {
  width: initial;
}

15 replies

KPCKevin Powell - Community

•Created by nikobak on 6/12/2024 in #front-end

This works on Desktop, but Mobile it's deform... please help

Hey! I forgot to tell you that you should also remove all <br> tags!. You don't need them and maybe that's the trick.

15 replies

KPCKevin Powell - Community

•Created by nikobak on 6/12/2024 in #front-end

This works on Desktop, but Mobile it's deform... please help

Hi @nikobak. The solution here is that you need to use box-sizing: border-box; in the input and textarea elements. Basically, when you are using padding in this type of elements, the element itself is taking that padding as outside its own box (like a border). Then you need to indicate the box sizing is applied with the border box included.

* {
  box-sizing: border-box;
}
// Or you can specify your selectors.
input, textarea {
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}
// Or you can specify your selectors.
input, textarea {
  box-sizing: border-box;
}

The simple way to do this is to use a reset css. There are many of them in the internet or you can try to do yours!

15 replies

KPCKevin Powell - Community

•Created by Viviana on 6/4/2024 in #front-end

Custom Font doesn't work

👏 👏

25 replies

KPCKevin Powell - Community

•Created by Viviana on 6/4/2024 in #front-end

Custom Font doesn't work

I've tried the Ubuntu font example btw from here: https://transfonter.org/examples and it works even in local environment without a node/apache server.

25 replies

KPCKevin Powell - Community

•Created by Viviana on 6/4/2024 in #front-end

Custom Font doesn't work

Hi mate. You can also try with another font or maybe you've missed the font-family asignment to body/html tag? Do you only have that css defined? @Viviana

25 replies

KPCKevin Powell - Community

•Created by Kim Jong on 5/27/2024 in #front-end

height: 100% not working on Android WebView

Yup. That's correct. The svh and dvh units include the url bar. Using the vh unit it gets the entire navigator height with bars. Remember this only happens in some browsers for mobile devices.

6 replies

KPCKevin Powell - Community

•Created by Kim Jong on 5/27/2024 in #front-end

height: 100% not working on Android WebView

Hi @Kim Jong. Maybe you can try using svh instead of vh . That happens because of Chrome behavior in mobile devices. Kevin explain this in this video: https://youtu.be/veEqYQlfNx8?t=191. Hope this can help you understand and fix your problem.

6 replies

KPCKevin Powell - Community

•Created by iurychiga on 5/21/2024 in #front-end

centralize with margin: auto

Hello @iurychiga . Here is my thoughts about this. I think margin left and right with auto value only works on the element itself and not for its parent. Also, It only works when that element has the width property established.

3 replies

KPCKevin Powell - Community

•Created by IVY on 4/21/2024 in #front-end

Nav menu items not tking full hight of parent container.

Hi. I'm show you how I would do it.

/* Remove this position relative */
#menu-primary-menu>li {
    position: relative;
}

/* Add height of 8rem and display flex properties on link to avoid submenu blinking issues on hover */
#menu-primary-menu>li>a {
    height: 8rem;
    display: flex;
    gap: .4rem;
    align-items: center;
    padding-inline: 2rem;
}

/* Add position relative to sub-menu parent */
.menu-bar {
  position: relative;
}

/* Set the top position to 0 regarding its parent element .menu-bar position */
.sub-menu {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    transition: ease-out 0.3s;
    min-width: 240px;
    border: 1px solid #e5e5e5;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: start;
    overflow: hidden;
}

/* Remove this position relative */
#menu-primary-menu>li {
    position: relative;
}

/* Add height of 8rem and display flex properties on link to avoid submenu blinking issues on hover */
#menu-primary-menu>li>a {
    height: 8rem;
    display: flex;
    gap: .4rem;
    align-items: center;
    padding-inline: 2rem;
}

/* Add position relative to sub-menu parent */
.menu-bar {
  position: relative;
}

/* Set the top position to 0 regarding its parent element .menu-bar position */
.sub-menu {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    transition: ease-out 0.3s;
    min-width: 240px;
    border: 1px solid #e5e5e5;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: start;
    overflow: hidden;
}

Also there is a link before Resources that I think it's not supposed to be there. Have a great night!

12 replies

KPCKevin Powell - Community

•Created by IVY on 4/21/2024 in #front-end

Nav menu items not tking full hight of parent container.

If you want that nav items have the same height, simply add a 100% height too and maybe a flex align-items and it's done 🙂

12 replies

KPCKevin Powell - Community

•Created by IVY on 4/21/2024 in #front-end

Nav menu items not tking full hight of parent container.

Ok. So you have an 80px height on header-customize-item account item in header-ct-right. I think you should add same height on the ul.menu-primary-menu or 100% height in its containers. Also add the align-items: center flex property in that to vertically center the nav items.

12 replies

KPCKevin Powell - Community

•Created by IVY on 4/21/2024 in #front-end

Nav menu items not tking full hight of parent container.

Ah ok

12 replies

KPCKevin Powell - Community

•Created by IVY on 4/21/2024 in #front-end

Nav menu items not tking full hight of parent container.

You can add

left: 0

left: 0

property and change width to 100% value.

.menu-sub {
  visibility: hidden;
  z-index: -999;
  position: absolute;
  background-color: #fff;
  **width: 100%;**
  z-index: 20;
  top: 70px;
  border-radius: 0 0 8px 8px;
  transition: ease-out 0.3s;
  display: flex;
  **left: 0;**
}

.menu-sub {
  visibility: hidden;
  z-index: -999;
  position: absolute;
  background-color: #fff;
  **width: 100%;**
  z-index: 20;
  top: 70px;
  border-radius: 0 0 8px 8px;
  transition: ease-out 0.3s;
  display: flex;
  **left: 0;**
}

12 replies

KPCKevin Powell - Community

•Created by IVY on 4/21/2024 in #front-end

Nav menu items not tking full hight of parent container.

Hi! Do you mean full width, right?

12 replies

Gaming

Programming