I'm trying to optimize my website's navigation bar for large screens, and I'm facing two issues: The content inside the navigation bar is not centered when the screen width exceeds 800px. The background color of the navigation bar doesn't stretch…
I saw the below design and would like to implement something similar in my web application, but how do I make the div tilted on the top (as shown in the image)? My output: <div class="" style="height: 100vh; background-color: white"></div>…
I’m working on a web layout where I need the .cart-items-container to occupy the remaining space above the .cart-rest-details section. The .cart-items-container should be scrollable if its content overflows, and the .cart-rest-details should remain fixed at the bottom of the…
so basically sidebar and navbar is both different components in my code i have navbar.jsx and sidebar.jsx and both are being called under student.jsx ... now on mobile screens i want that the sidebar also gets into that hamburger icon…
Question: I'm currently working on implementing a custom clip path in Flutter using CustomClipper<Path>, but I'm facing an issue where the horizontal lines in my shape aren't rendering perfectly straight. Below is a detailed description of the problem and what…
when in pc screen it shows full width but when switch to mobile it is not full width looks like it's width is 80-90% also my constent is overflowing outside so it is not so responsive on mobile whyy [enter…
I'm kinda confused. We use pixels for pretty much everything, from font size to breakpoints. I recently designed a website which changed to mobile landscape view at 770px but when viewing on my mobile I always get the tablet size…
I'm trying to implement a non-standart frame for a picture of a news section. My idea is to have the picture as a lower z-index than the frame and have the frame on top of it and make them responsive.…
body { display: flex; justify-content: center; align-items: center; gap: 15px; } .circle { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #333; color: #fff; font-size: 32px; font-weight: 600; border-radius: 50%; padding: 20px; aspect-ratio: 1 / 1; } <body> <div…
What I am trying is, "Your Privacy", Description and buttons should be aligned in same line. HTML: <div class="cookie-notice"> <div class="cn-body"> <h2 id="title">Your Privacy</h2> <p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p> <div class="cn-ok"> <a href="#" class="cm-link…