octavia0914
KPCKevin Powell - Community
•Created by octavia0914 on 8/21/2024 in #front-end
Media Queries
Hello Guys, these are the media queries I use, Can you chip in some advice if I am doing it wrong or right? Thanks
I do desktop to mobile, it's just a preference that's it.
/* 2xl /
@media (max-width: 1536px) {
}
/ xl /
@media (max-width: 1280px) {
}
/ lg /
@media (max-width: 1024px) {
}
/ md /
@media (max-width: 768px) {
}
/ sm /
@media (max-width: 640px) {
}
/ xs */
@media (max-width: 475px) {
}
5 replies
KPCKevin Powell - Community
•Created by octavia0914 on 7/22/2024 in #front-end
2 "fixed" sections causing gap
Hello, Could anyone help me figure out why this gap is occurring and how to fix it?
It is the gap on-top of the slide out menu when fully out, I want the slide out menu to have priority over the header, but there is a gap that forms, and is un-fillable , only fixable if I remove one of the positions "fixed" but then they wouldn't work as intended to.
the menu is supposed to hide when scrolling down and appear as you scroll up.
the slide out menu is supposed to take up all the screen from corner to corner.
Thank you, and I appreciate the help.
https://codepen.io/Eddiev10/pen/zYVBxRQ
https://codepen.io/Eddiev10/pen/zYVBxRQ
7 replies
KPCKevin Powell - Community
•Created by octavia0914 on 7/21/2024 in #front-end
Animate on scroll
Hello, I know how to use animations appear from top, left, bottom, right, etc. But how can I make them only appear when scrolling, most of the videos on youtube use Javascript Libraries, I just want to use original (vanilla I think?) javascript. Thank you
https://codepen.io/Eddiev10/pen/jOjqjvB
12 replies
KPCKevin Powell - Community
•Created by octavia0914 on 7/14/2024 in #front-end
"how to stop the "fixed" background image from overflowing into other sections
Hello Guys, Can somebody please help me figure out "how to stop the "fixed" background image from overflowing into other sections" of the website.
I only want the fixed image to show when I scroll in that section, but I don't want it to be visible when scrolling to other sections, or overflowing from the top and bottom. Thank you
https://codepen.io/Eddiev10/pen/YzoXRaG
4 replies
KPCKevin Powell - Community
•Created by octavia0914 on 6/3/2024 in #front-end
Border only in corners
Hello, Could does anybody know how to get borders only in corners? instead of the top border going all the way across only having like 10% of it, and then doing the same thing with the left corner having 10% of it to form like a L in the corner? Thank you.
8 replies
KPCKevin Powell - Community
•Created by octavia0914 on 4/30/2024 in #front-end
kind of "parallax"
Hello , could anyone help me understand how to create this effect?
There is a background image that is position fixed at a lower z-index, and there is content on-top higher z-index with a transparent background to be able to see the image in the background, and the image background is fixed, but the content on top is scrollable, and when that section ends the one on-top of the background image, it just kind of fades into the next section, and the background image in only viewable when you are scrolled on that specific section and just gets overtaken by another section when you scroll away. I had a screenshot but can’t find it. It's similar to “parallax” but less animated I guess.
2 replies
KPCKevin Powell - Community
•Created by octavia0914 on 4/6/2024 in #front-end
Iphone safari search in the way
hello, could somebody help with a solution to the safari search popping up when you scroll up, and the website moves up, I've tried messing around with min max, dvh, vh, padding, and I kept reading about adding 50px? could someone help, and thank you. Do I need to use js?
4 replies
KPCKevin Powell - Community
•Created by octavia0914 on 4/2/2024 in #front-end
background scrolling when menu is open
Hello, does anybody know, how to stop background scrolling when you open side menu? I've tried overflow-hidden but it does not work unless its on the main body, but then how would I make it work only when menu is open and closed? without it being always being hidden?
3 replies
KPCKevin Powell - Community
•Created by octavia0914 on 3/24/2024 in #front-end
image rendering blur when scaling.
Hello, could anybody give me a tip on how to avoid image blurring when it scaled up, So I have my image in a container, and I put transform: scale (103%) when hovered to the container, the image has width and height 100%, so it fills up the container when I hover over it and the container the images scale up, but it blurs during the transition, and I have .6s ease-in and out aswell, I tried to upload code pen but keeps giving error trying to host image. Thank you.
.container--scale-1{
padding: 5em 5em;
position: relative;
z-index: 100;
overflow: hidden;
width: 19em;
height: 13em;
background-color: black;
border: 2px solid none;
transition: .6s ease-in-out;
}
.container--scale-1:hover{
transform: scale(103%);
}
.container--scale-1 img{
width: 100%;
height: 100%;
z-index: -150;
position: absolute;
object-fit: cover;
top: 0;
left: 0;
background-position: center;
opacity: 80%;
}
13 replies
KPCKevin Powell - Community
•Created by octavia0914 on 3/22/2024 in #front-end
Forms for websites.
Hello, Could somebody please explain how forms work? I read through a "mailto" articles and tutorials yet they dont show how where or how to add, I've also seen only using html? will that work or do I need javascript? I just don't get how to send the information they put into the form, and get it sent to me on my email? thank you.
4 replies
KPCKevin Powell - Community
•Created by octavia0914 on 3/13/2024 in #front-end
Forms functionality
Can somebody please explain how forms work? I know how to create and style to what I want, but where are they submitted to? I googled and youtube and they mention "php", but they I haven't found anything explaining where forms submit to. Like if your have a contact form, and they put the basics, name, phone, email, where does that go? and how or where does the company whos website it is get that information, does it get emailed or texted to them to call the clients? please explain and thank you.
3 replies
