Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized.
Check out this example on CodeSandbox
Looking for something like: https://i.sstatic.net/BuMOn.png
Instead of: https://i.sstatic.net/tpO6P.png
Ensure that every card has a set height and a set width
[theme.breakpoints.up("sm")]: {
backgroundColor: theme.palette.secondary.main,
flexBasis: "9.5%",
height: 60,
width: 60,
display: "flex",
justifyContent: "center",
alignItems: "center",
margin: 5
}
When using padding or margin with a vertical percentage value, it can be referenced by the width. A media query can be set to adjust rows from ten to five.
Here is an example down below or you can experiment in Codepen here
.flex-container {
background: rgb(63, 81, 181);
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
counter-reset: items
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
font-weight: bold;
font-size: 2vw;
text-align: center;
max-width: calc(10% - 10px);
flex: 1 0 calc(10% - 10px);
/* can also be a flex container */
display: flex;
align-items: center;
justify-content: center;
}
.flex-item:before {/* stretch it to be a square */
content: '';
float: left;/* if not a flex child*/
padding-top: 100%;
}
.flex-item:after {
counter-increment: items;
content: counter(items)
}
@media screen and (max-width:800px) {
.flex-item {
max-width: calc(20% - 10px);
flex: 1 0 calc(20% - 10px);
}
}<p>click for full page view</p>
<div class="flex-container">
...
Here is an example of a JSX file: const Routes = { item: '/Dev/Item', count: '/Dev/Count', }; module.exports = Routes; If you want to have the object set conditionally, you can do it like this: const Routes = {}; if(true){ ...
I am attempting to contain a scrollbar within a div so that it remains within the rounded corners without overflowing. Take a look at the code snippet below to see the problem in action. Is there a way for the scrollbar to be fixed in its position, while ...
Looking to use a large banner image on my website with dimensions of 976X450. How can I make sure that the image stretches to fit higher resolution monitors without using multiple images for different resolutions? ...
I am trying to make an image move smoothly inside a div using jQuery and CSS. I have tried rotation and animation, but nothing has worked the way I need it to. <div class="baloon" style="position:fixed;left:0px;top:160px;"> <img id="rot" class="r ...
I am creating a newsletter template using foundation. Within the table, there are 2 <th> elements containing the content "Reservationnumber" and "23425-FF3234". I have multiple instances of these <th>. I want to apply a colored font to them. Wh ...
Here's a code snippet that I'm working with. It has the ability to make the navigation stick to the top of the page when scrolled to. HTML <script> $(document).ready(function() { var nav = $("#nav"); var position = nav.position(); ...
Currently, I am developing a React Quiz application for an online course. The application consists of two main components. The first component is the Quiz component: export default function Quiz() { const [userAnswers, setUserAnswers] = useState([]); c ...
As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries: jss emotion styled-component. I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking sp ...
Is there an official CSS way to change the background color based on the child element in HEX? For example: render() { return ( ... <span> <h3 style={{ color: item.color }}>Item Color</h3> </span> ...
Working on developing an app using create-react-app with the command: create-react-app my-app After creating the app, running npm start results in no output and the app fails to start. Here is what appears: <a href="/cdn-cgi/l/email-protection" class=" ...
I'm attempting to create a dropdown that spans the full width of the screen and has a collapsible feature like many modern websites. However, I am having difficulty figuring out how to achieve this. I experimented with using Bootstrap's collapse ...
I am facing an issue where I have an object named waA that is required in the final step. However, in ReactJS, the new object is not updating the previous object using a switch statement in a function. Below is the code for the object: waA = { jso ...
I'm attempting to customize the styling of bootstrap CSS columns col-xl in order to display 5 or 6 cards/tiles on my webpage instead of just 4 (refer to attached image) without interfering with the other grid layouts. Unfortunately, I am currently str ...
I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help. ...
I need help creating a navigation bar with different background colors and hover colors for each block. I can do this separately but not together, so please advise on how to combine both in the li class. Below is the code for the navigation bar: header ...
How can I select all elements with the class .Tag that are not equal to the element passed to the function? Here is my current attempt: $("a.tag").filter(":visible").not("\"[id='" + aTagID + "']\"").each( function place(index, ele ...
As a beginner in web development, I have a question. Typically, I know how to style the submit button when it's created in the HTML page using CSS. However, I'm wondering if it's possible to apply CSS styling to the JavaScript block instead. ...
Currently utilizing Firebase phone authentication for verifying phone numbers in my React Ionic app. It functions flawlessly on the web version, however, I encountered an error on iOS. Unhandled Promise Rejection: FirebaseError: Firebase: Error (auth/int ...
I have a flexbox with columns that each take up one third of the width. However, due to using flex-grow, the last element does not stick to its column size. I understand why this is happening, but I don't want to use max-width as it's not always ...
Whenever I try to access .props in RecipeList.js and Recipe.js, a syntax error occurs. Below is the code snippet for Recipe.js: import React, {Component} from 'react'; import "./Recipe.css"; class Recipe extends Component { // pr ...