I put a lot of effort into getting these 3 screen sizes, but somehow my mobile view is still off center, help?
Unsure of how to get those background curves like the design. I put them as classes on divs, but my border-radius is not even close. ideas?
Nice work. For your issues about centering on mobility I took a glance real quick glance debugging. I would suggest not to use a lot of 80vh/vw instead use 80% so you take up 80 percent of the parent div. Some your issue is that you want to use 100vw on some children but the parent does not go 100vw so I see alot of overflow. I suggest to look at divs with tags .background-1, .details, and div.test-container.
For example:
.background-1 {
background-color: var(--dark-purple);
position: absolute;
border-radius: 0% 0% 10% 10%;
height: 55vh;
width: 100% //100vw;
z-index: -10;
}
As for the weird curve border-radius try something like this on the background-1:
border-bottom-left-radius: 100% 50%;
border-bottom-right-radius: 100% 50%;
This is just an example where you can control the curve on each side you can play with the numbers I tried 90% 20% and is closer.
Input borders: I couldn't get them to change colors (red or purple), not with an error class or on with input[type="text"]:focus, input[type="text"]:focus-visible please help.
Here is what you need it is an inherited web browser default style you need to explicitly turn off.
input[type="text"] css selector add
outline: none;
Then you just need to have two pseudo-classes for :active and :focus, with no need for focus-visible.
Also you can leave it just input as the selector
Hi everyone! Explain to me please the difference in the next CSS-code behavior: body { background-color: yellow; width: 300px; border: 1px solid red; } The whole viewport area will be filled with yellow. At the same time, you can see a 300 px wide red rectangle. If the body element contains everything in the file, it makes sense that it fills the background with yellow. But why do I see a small rectangle? On the other hand, what lies outside of this rectangle if it marks the border of the body element correctly?
I think this is the answer you are looking for:
In HTML and CSS, the body element, by default, takes up the entire height of the viewport, even if its content has zero or minimal height. This behavior is a result of the default styles applied by browsers.
Here's why the body background color fills the whole screen even if it has zero height:
Default Styles: Browsers have default styles for HTML elements, including the body. By default, the body element has a margin of 8px, which can create spacing around the body content. Additionally, the body has default padding and border values set to 0.
Collapsing Margins: In CSS, margins of adjacent elements can sometimes "collapse" into each other, causing the effective margin to be larger. If there is no content or explicit padding or margin set on the body, the margin might collapse to the html element, causing the body to extend to the top of the viewport.
Viewport Height: The body element is expected to fill the entire viewport by default. If it has no content or minimal content with no explicit height, it will still expand to occupy the full height of the viewport.
To prevent this behavior and make the body element take only as much height as its content, you can explicitly set the height of the body to auto in your CSS:
body { height: auto; /* Other styles */ }
Or, if you want to ensure the body element only takes the height of its content and has no margin, you can use:
body { margin: 0; height: auto; /* Other styles */ }
By setting height to auto, you instruct the browser to adjust the height of the body based on its content, and by setting margin to 0, you remove any default margin that might be collapsing with other elements.
Me gustaria saber si puedo conseguir mejores practicas dentro de las herramientas que utilice en este proyecto... muchas gracias espero les sea de su agrado
Veo que estás usando tailwind. Partes de su código necesitarán tener algo de CSS de personalización para sus gradientes.
background: linear-gradient(0, hsl(241, 81%, 54%) 0%, hsl(252, 100%, 67%) 100%); } .avg_score_container_element_container { background: linear-gradient(0, hsla(241, 72%, 46%, 0) 0%, hsla(256, 72%, 46%, 1) 100%); }
stuck a little in validating the input tag with regex
try this for validate email:
const validateEmail = email => { return String(email) .toLowerCase() .match( /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ); };
