I am in the process of creating a shopping page which contains an array of items, I have also implemented functions such as "addToCart", "removeFromCart", "increaseQuantity" and "decreaseQuantity". However, when I pass these values as a prop to the cart…
I work in fixed nav bar width changing it's width to 100% on small-devices but the navbar going over the screen width. as you see there on the image bellow: the navbar css class parent base nav have display: block…
Click to see image I can't get my icon in my div to center. Ive tried display block/Flex, justify content center, align text center. None of those want to center my icons in my div. Heres my code so far…
I have a section with two main div: <section class="about-us" id="about-us"> <div class="abtus-img"> <img src="/images/about-us.jpeg" alt="Patricia and Midel"> </div> <div class="content"> <div class="abtus-text"> <h3>Today is God's</h3> <h3>Unfailing faithfulness</h3> <h3>WE</h3> </div> <div class="main-text"> <h1>Name</h1> <p>and</p> <h1>Name</h1> </div> <div class="info"> <div class="info-p">…
When i run my NextJS app using npm run dev the Image component gives the error "missing required "width" property" To make the app work, i need to set width and height as inline attributes for all Image components in…
</body> <div id="header"> <div class="container"> <nav> <img src="logo.png" class="logo"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </div> /css .container{ padding: 10px 10%; } nav{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }…
i download bootstrap template for project and when i run the script on browser nothing shows up. where is the problem in this code i expect to show-up output on my local-host. home.jsx i remove most code because stack overflow…
let apiResponse = [{ id: 134, user_name: 'abc', phone_number: 1234567890, sno: 'AM' }, { id: 948, user_name: 'def', phone_number: 9823437483, sno: 'AM' }, { id: 865, user_name: 'abc', phone_number: 1234567890, sno: 'PM' }, { id: 659, user_name: 'ghi', phone_number: 9834763467,…
my issue with FilePond is when I upload multiple images it سeparates the requests, which prevents me from uploading the images to one folder. Here is my input field: <input type="file" id="imgs" name="imgs" accept="image/jpeg" multiple data-allow-reorder="true" data-max-file-size="3MB" data-max-files="5" > Here…
I have a nested array in html table. Am able to display the table. However, i have a problem with inserting headers to the nested arrays columns. Below is the code: table.js const Table= college?.map((item => <tr > <td> {item.department.map((item,i)…