rayannn
KPCKevin Powell - Community
•Created by rayannn on 7/6/2024 in #front-end
Dev tools phone size
When i click on the dev tools in chrome and choose a phone size, lets say iphone XR. it shows my page being responsive but when i zoom out the positioning and margins/padding are completely off. What actually resembles the actual size of the device in the dev tools,t he initial time i choose a mobile size or when i fully zoom out?
My apologies for the post being confusing but this is the best i can explain it.
21 replies
KPCKevin Powell - Community
•Created by rayannn on 7/5/2024 in #front-end
How to create a button like in the example
13 replies
KPCKevin Powell - Community
•Created by rayannn on 7/1/2024 in #front-end
Creating responsive navigation bars with a hamburger menu
30 replies
KPCKevin Powell - Community
•Created by rayannn on 6/28/2024 in #front-end
How to display value or data in HTML with Javascript
36 replies
KPCKevin Powell - Community
•Created by rayannn on 6/20/2024 in #front-end
Creating a cart functionality
I'm currently creating this design (https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6) and almost finished it but im stuck on the cart functionality part. I implemented the counter part where i can increment or decrement by clicking on the + and - . The goal is to get this value and put it in the shopping cart when the add to cart button is clicked.
I just dont really know how to create the cart itself , i've looked it up and the results are mostly different kind of cart functionalities. My first thoughts were that i create a div that's hidden but then gets visible when the cart icon is clicked but that's as far as i currently am. Im not aware on how to get all the info and pictures in the cart without statically adding them
I just dont really know how to create the cart itself , i've looked it up and the results are mostly different kind of cart functionalities. My first thoughts were that i create a div that's hidden but then gets visible when the cart icon is clicked but that's as far as i currently am. Im not aware on how to get all the info and pictures in the cart without statically adding them
538 replies
KPCKevin Powell - Community
•Created by rayannn on 6/20/2024 in #front-end
Changing the color of a SVG image
My code is as follows:
<div>`
`<button class="modal-close"><img src="svg"></button>`
</div`
I cant change the color of the svg with fill, color or applying fill in the svg file itself. I've also tried !important but neither worked. i've tried the options below and none applied the color.
.modal-close{
color: white;
}
.modal-close img{
color: white;
}
<svg fill="white">38 replies
KPCKevin Powell - Community
•Created by rayannn on 5/16/2024 in #front-end
Struggling with creating layouts and using correct size units
I'm trying to recreate the hero section of this design. I've tried different size units from pixels,vh to % and i cant get the edges of the images to touch like in the design.
I''ve made a div with 2 containers, 1 has the text and one has the image. I applied display:flex and they allign correctly but its not as pixelperfect as the design.
What should i do to recreate the design? i've tried css grid and gotten the same results. I can look up the solution but for now i would like to figure it out myself with some pointers. Any advice would be appreciated.
https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef
39 replies