My Steam Inventory Viewer is experiencing an issue with items with longer names. The div container becomes bigger than others, as seen in the demo on freegamekeys.info/trade or the image at http://prntscr.com/crpqk5. I am having trouble explaining my problem, so I have provided links to my website.
Is there a way to ensure that all div containers are the same size without changing the images or names of the items?
Thank you.
Simply include the following code snippet in your CSS:
.card {
max-height: 155px;
min-height: 155px;
padding: 10px;
box-sizing: border-box;
}
If you wish to vertically align the contents, add this additional CSS:
.card {
max-height: 155px;
min-height: 155px;
padding: 10px;
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Don't forget to use Autoprefixer for better browser compatibility.
Here is a production-ready version of the CSS with Autoprefixer applied:
.card {
max-height: 155px;
min-height: 155px;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}If you need to adjust spacing after images, you can utilize the following CSS rule:
.card>img { margin-bottom: -10px; }
My goal is to achieve this desired outcome: Currently, I have the following (focusing only on the left element for now): I am struggling to make the left arrow transparent and I can't seem to figure out how. This is the CSS Code I have so far: .ma ...
I recently designed a webpage with the following elements at the beginning: <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet ...
Is there a reliable method for preloading CSS hover images using jQuery that anyone knows of? My ideal scenario would involve adding a class (for example, "pre-load-hover") to any element needing preloading, and then implementing JavaScript in $(document) ...
I'm facing an issue where my code works in the w3schools code editor, but not on localhost or cpanel host. When I try to run it on another host, it gives me a bad request and doesn't return the answer. Here is the code snippet that I am working ...
I am working with 'material-ui' and attempting to change the color of a table element based on its value. In the code snippet below, I have tried to make the background color go red if the cell value is "Out of Zone". However, even though the tab ...
Greetings everyone, I am facing an issue with multiple iframes on my page, each with a different src attribute. Despite specifying unique sources for each iframe, upon loading the page, they all seem to be loaded with the same src. <html><body&g ...
I have a div that includes a button (Book it). When the button is clicked, I want to append the id of the item I clicked on to the current URL. Then, use that id to display a popup box with the details of the clicked item without refreshing the page, as it ...
function solveTheIssue(id) { promptUser({ title: "Share your complaint", input: "textarea", showCancelButton: true, confirmButtonColor: "#DD8B11", confirmButtonText: "Yes, submit it!", ...
Page1.html has a form with a drop-down menu containing options Color and Shape. There is also a submit button. Assuming Page2.html displays various shapes like Blue Square, Red Square, Blue Circle, Red Circle, is it feasible to create a JavaScript file th ...
I attempted to send a value to a modal by following the instructions on the Bootstrap documentation here. However, I am facing an issue where the data is not being successfully passed. To trigger the modal, use the following button: <button type=" ...
After upgrading from Mui 4 to 5, I am facing a challenge in using class names effectively. While the SX property allows me to apply styles to individual components, I am struggling with applying the same class to multiple components. In version 4, my code ...
Here is a question that closely relates to this one: Enable div to scroll by keyboard without clicking I am aware that explicitly focusing on the element will enable the desired behavior. My inquiry is whether there is a way to achieve this implicitly. ...
My goal is to include an 'itemtype' attribute in the body tag, body.page-body.ng-scope.device-lg(itemscope='', itemtype='') I attempted the following method $('body').add(itemtype='t1'); Unfortunately, ...
On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...
Using the information from an article on HTML5Rocks, I am attempting to create a tool that can capture photos from a webcam. Here is an excerpt of my HTML code: <button type="button" name="btnCapture" id="btnCapture">Start camera</button>< ...
I have an onchange function that triggers when the "pending" option is selected in a select dropdown menu. This function adds a predefined value to an input field. However, I also want this functionality to apply when the page loads. Currently, the "pendin ...
There seems to be an issue with the second line indent when using a custom counter. When attempting to use 'list-style-type: decimal', the numbering does not display as desired, for example: ol { counter-reset: ci-counter; list-style- ...
Utilizing media queries allows us to modify the CSS for various screen sizes. My inquiry is: can we switch to a completely different page layout (or View in MVC) when the window size, specifically when the width is less than 500? Assuming that the control ...
I am currently experiencing an issue with my background images not rendering properly on mobile devices, specifically safari and chrome on iPhone XR. Although they appear to work perfectly on Code Pen - resizing properly as the viewport shrinks and switchi ...
After adding a third button, I noticed that the buttons were now displaying in a column instead of a row. html: <div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator"> <div *ngIf="isChannelE ...