Currently, I am practicing flexbox and breakpoints in material UI using React.js and I am attempting to achieve a layout similar to this: https://i.sstatic.net/vAkdo.png
My goal is to have the product images and type displayed in columns, while the product's price, name, quantity, etc. are arranged in rows.
Below is the code I have been working with:
https://codesandbox.io/s/quizzical-bassi-5844oo?file=/src/App.tsx
<Box sx={{display: "flex",flexDirection:"row",width:"100%"}}>
<Box sx={{display: "flex",flexDirection:"column",width:"50%"}}>
<span>{product.name}</span>
<span>{product.quatity}</span>
<span>
{product.content?.map((item) => (
<li>{item}</li>
))}
</span>
<span>Remove</span>
</Box>
<Box sx={{display: "flex",flexDirection:"column",width:"50%",alignItems:"end"}}>
<span>item.price</span>
<span>total price</span>
</Box>
</Box>
</Box>
<Box
sx={{ display: "flex", flexDirection: "row", width: "100%" }}
>
<Box
sx={{
display: "flex",
flexDirection: "row",
width: "100%"
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "50%",
alignItems: "start"
}}
>
<span>{product.name}</span>
<span>{product.quatity}</span>
<span>
{product.content?.map((item) => (
<li>{item}</li>
))}
</span>
<span>Remove</span>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "50%",
alignItems: "end"
}}
>
<span>item.price</span>
<span>total price</span>
</Box>
</Box>
</Box>
</Box>
Unclear on your specific requirements. I believe you are seeking pricing details towards the end of the flexbox layout.
You may find helpful resources on Flexbox at this particular site
I recommend exploring Justify-Content - Space-Between, using the flex-row layout.
There is a strange issue plaguing my code - I'm enclosing some text in a span tag and it's causing an unexpected line break. It's unclear whether React.js, Next.js, or Bootstrap is the culprit, but I can't seem to get rid of the pesky l ...
I am currently working on a design project using Bootstrap 5 where the navbar is contained and the hero header section below extends beyond the container's boundaries only on the right side. Below is an image depicting the design I am aiming for: ht ...
My website requires users to complete 10 orders daily, and I want to reset these orders to 0 at 9am every day. I am using the MERN stack. How can I achieve this reset? My current approach is to send PUT requests to modify user orders to 0 at 9am every day. ...
I am experiencing a small issue with this JS code... -I have multiple divs that are changing automatically in rows as they move randomly... I want to change the color of the div moving up to green. And for the div moving down, I want to change the colo ...
I've encountered an issue with my React code that I can't seem to figure out. I am integrating the Accuweather API and trying to display the weather icon on my app. Initially, everything seemed to be working fine as I constructed the image path l ...
Has anyone figured out how to make the title of the content stick at the top, one below the other, as the user scrolls? I've been using Bootstrap's Scrollspy, which works fine, but I need a few additional features. You can check out the codepen l ...
Is it possible to display a textbox in javascript when a checkbox is already checked onLoad? And then hide the textbox if the checkbox is not checked onLoad? ...
Trying to set up the type definitions for React 15.6.1, but encountering an error: $ npm install --save @types/react npm ERR! git clone <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88efe1fcc8efe1fce0fdeaa6ebe7e5">[email&# ...
Is it possible to customize the color of the print and echo text on your HTML page, rather than having it just in black? Thank you. ...
My website has a lovely gradient background on the html tag in css, while the body tag showcases a seamless pattern repeating on both the x and y axes. Everything was looking great until I checked the website on an iPad/iPhone in portrait mode, where the ...
I am in the process of developing a react native application and have integrated Firebase, specifically firestore, for data management purposes. My current goal is to incorporate an automatic login feature in my app, where users remain signed in even after ...
My webpage has a div element that I want to be able to change the background color of by clicking on it. The background should either be transparent with no color, or a reddish/pinkish shade. I've written a javascript function to handle this function ...
I'm having trouble getting Tailwind CSS to work properly. I've made sure to update to the latest version, but for some reason Tailwind is not functioning and there are no errors showing up in the console. Here is a link to my header component an ...
When checking the browser console, I noticed a warning that reads as follows: react_devtools_backend.js:3973 The component styled.div with the id of "sc-dmRaPn" has been created dynamically. You may see this warning because you've called sty ...
Looking for some assistance with my TV Show Searcher project that is based on an API. The functionality is complete, but I'm struggling to get the Bootstrap cards to stack neatly without any empty space between them. I want it to resemble the image ga ...
I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...
There are some related topics worth exploring, such as: Slick carousel center class not working when going from last item to first item Despite trying various solutions, the issue still persists in my code. My goal is to have each item displayed in the ce ...
I have developed a unique custom component library using React and styled-components for creating reusable components. I then imported this library into my nextJS project, but I noticed that the styles from the custom component library are not applied duri ...
I have a React component that functions as a card containing a title and an image. I want the image to change upon hovering over the entire card, rather than just the img element itself. While CSS and the background property could achieve this, I prefer k ...
<div class="applications-wrapper"> <div class="eye" id="onetwo"><a class="fa fa-eye" href="#"></a></div> <div class="bar" id="twothree"><a class="fa fa-bars" href="#"></a></div> </div> My ...