Recommended way to store values for this circumstance
Hey, let's say you have an example on an educational site like the codepen example. You have a set of questions and it tells you if your answers are right or wrong. What would be a recommended way to store the correct answers for it to test against as i know that storing them in an
if
statement isn't optimal. Thinking on a larger scale, let's say the site has a large number of these question boxes, it'd have to be something that could cater for that many values and Ideally something users can't f12
their way to like storing it in a data attribute.
I'm trying to learn best practices for these sorts of things. Thanks in advance.
https://codepen.io/deerCabin/pen/dyBGzpX...Problem with responsive navbar
I having this issue where when I open my website on a phone (second picture), the navbar doesnt fit, the hamburger menu is way in the right (third picture). But when I scale my window down to phone size on pc (first picture), every thing works, the about me and other A tags go into a menu. Any idea why that might be?
Why does the background color scale down more than the font?
Why does this happen and what to do about it? I have a normal div with lots of text and a background color and a font size of 2rem. When I start reducing the width, after some point the the text and background-color start to scale down disproportionately. Any explanation would be appreciated.
Here's a code pen link, but doing this locally on the machine would reproduce the issue better.
https://codepen.io/prashant6299/pen/JjQGWpK...
Responsive `clip-path` units?
I've got a card that looks like this. The bottom right corner "carve-out" is accomplished with a
clip-path: path(..)
. The button inside the carve-out space is sized with rem
units, and I'm wondering if there's a way to make the path(..)
responsive to font-size as well. Currently stuff like l 96,0
refers to 96 pixels.animation issue
Hey, i'd like a button that when pressed plays an animation on another element. What i have works however i can only play the animation once, when i press the button again it doesn't play. Why is this? Thanks in advance.
https://codepen.io/deerCabin/pen/qBzbqJK...
Menu not top.
How do I make a Menu that sticks to the top but I also wan to make a shape of it. Do I use position sticky?
Tabs component of MUI breaks the UI when I resize the window
Hi guys, I'm using Tabs component of MUI. When I resize the window, it places out of the parent container. I want it only place inside the parent container. How can I fix it?
Bootstrap dropdowns
Currently i am learning front-end on a platform and i am currently in the bootstrap modules.
While being at the navbar part of the course i had to make a navbar, but since i wanted to practice some more i decided to try and make a random navbar from any site.
I had WZhub open and decided to make that one.
...
How to split a div into even sections?
I have these sections defined in my
main
element that's set as a grid. I want to be able to split the sections into columns that I can assign individual images to. For instance as shown in the second image.
The other two sections would be handled the same way. Since there's only 3 items in the first section, I'd like it to be split into 3 columns, but in the other two sections where there's 8 items, I'd like it to be split into 2 rows of 4 columns. Is this something that'd be easy to achieve with flexbox? I can provide code if needed....code block example
Hey, i know code blocks are usually written using the
pre
tag, but since that's a nightmare to read and navigate through in the html due to the fact you have to un-indent everything inside of it, i tried to come up with a more manageable way of creating one. Is it an acceptible method? Am i allowed to put div
tags in code
tags and span
tags inside of eachother etc? does it cause any accessibility or semantic problems etc? i'd appreciate any opinions, thanks in advance.
https://codepen.io/deerCabin/pen/GRbpzML...set parent radius same value as child circle radius
So I wanted to make some kind of button that have an image(circle) inside it and some text next to it, I wanted the size to be dependent on the circle image and the parent radius has to match the circle image radius so it will fit perfeclty, here's my attempt:
https://jsbin.com/cewodeyiso/1/edit?html,css,output
The problem here is that the border-radius is calculated on a hard coded value of the circle width, I wanted it to work no matter what the auto width of the circle is. Any insight on how to do it?...
maintain empty space from the bottom of the screen like notion
hello does any one know how notion maintains the empty space from the bottom of the screen? I am implementing a note app and haven't been able to find a solution
Wavy animation on svg
Hello, need help. Any ideas how do I create such animation
All I have is this svg:
```
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="772" height="1024" viewBox="0 0 772 1024">
<g id="icon-hot" />...
scale animation on an image
How do I apply a css scale animation on this image without getting out of boundary like touching the div outside it. When I scale it, it gets out of the div inside it.
Layout Issue
The issue is with this second layout when i try to change the screens he goes like this
https://codepen.io/Anes039/pen/MWMaXJb...
pre tag & position absolute issue
Hey, i have two questions regarding a code block design i'm making.
1. Regarding the
pre
tag, I'm aware that you have to un-indent everything within it so extra space isn't presented on the page however i still get space above and below my text even when i do this, why is this? (see image 1)
2. i'm using position absolute (i've tried margin-left: auto;
without position absolute too and it provides the same problem), to push the language name to the top right of the div however when the screen is too small to fit the text and my horizontal scrolling on the div kicks in, when you scroll the element doesn't follow to the new top right, how would i make it do this? (see image 2)...Column wrap (clipping) using masonry
Just trying to figure out how to prevent object clipping. The column is breaking mid-component and splitting onto the next column ( see top of column 2 - it's a continuation of the bottom of column 1).. I'm sure there's something simple to change this. I'll put together a codepen if needed... (Using tailwind of course)
```
// parent component
{/* Reviews */}...