stillmorris
stillmorris
PostsComments
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