Seeking assistance with a CSS issue involving aligning texts in top and bottom columns regardless of character size variations.
The challenge lies in the inconsistency of character sizes, causing misalignment in the text. Unable to find an effective solution for alignment.
If anyone can provide guidance or support, it would be greatly appreciated!
View problem on Codesandbox: https://codesandbox.io/s/sad-maxwell-h8vin5?file=/src/App.js
Grid layout is the optimal choice for achieving this task as it provides control over the arrangement both horizontally and vertically. Utilize the SimpleGrid component in MantineUI.
Remember that each Mantine component corresponds to specific CSS properties, so selecting a component applies those styles rather than purely organizing code. Below exemplifies how you can streamline your code and enhance maintainability by eliminating unnecessary Mantine components (see demo here).
//App.js
import { Fragment } from "react";
import {
MantineProvider,
Divider,
Paper,
SimpleGrid,
Text,
Title
} from "@mantine/core";
import { data } from "./data.js";
export default function App() {
const breakpoints = [
{ maxWidth: "60rem", cols: 3, spacing: "md" },
{ maxWidth: "40rem", cols: 2, spacing: "sm" },
{ maxWidth: "30rem", cols: 1, spacing: "sm" }
];
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<Paper shadow="xs" radius="xs" p="1rem" m="1rem">
<Title order={2}>Conta</Title>
<Text size="sm" color="violet-purple.0" fw={700} mb="lg">
Restaurante Vila do Fausto Ltda
</Text>
<Divider size="xs" variant="dotted" />
{data.map((section) => (
<Fragment key={section.title}>
<Title order={5} my="lg"gt;
{section.title}
</Title>
<SimpleGrid cols={4} spacing="lg" mb="lg" breakpoints={breakpoints}>
{section.content.map((item) => (
<div key={item.heading}>
<Text color="#7C9599" fw={700} size="sm">
{item.heading}:
</Text>
<Text size="0.8rem">{item.details}</Text>
</div>
))}
</SimpleGrid>
</Fragment>
))}
</Paper>
</MantineProvider>
);
}
//data.js
export const data = [
{
title: "Informações Gerais",
content: [
{ heading: "Nome da Empresa", details: "Lorem Ipsum" },
{ heading: "CPF / CNPJ", details: "Lorem Ipsum" },
{ heading: "Razão Social ", details: "Lorem Ipsum" },
{ heading: "E-mail", details: "Lorem Ipsum" },
{ heading: "Telefone", details: "Lorem Ipsum" },
{ heading: "Natureza Jurídica", details: "Lorem Ipsum" },
{ heading: "NIRE", details: "Lorem Ipsum" },
{ heading: "Orgão de Registro ", details: "Lorem Ipsum" }
]
},
{
title: "Endereço Principal",
content: [
{ heading: "Logradouro", details: "Lorem Ipsum" },
{ heading: "Número", details: "Lorem Ipsum" },
{ heading: "Bairro", details: "Lorem Ipsum" },
{ heading: "Cidade", details: "Lorem Ipsum" },
{ heading: "Estado", details: "Lorem Ipsum" },
{ heading: "Complemento", details: "Lorem Ipsum" },
{ heading: "CEP", details: "Lorem Ipsum" }
]
}
];
Here is a question that needs solving: I have two elements that need to be displayed in one row at a specific ratio, with the same pattern repeating in subsequent rows. However, the content of the next row is appearing in the unused space of the previous r ...
Currently utilizing the Coda Slider for my project. For those unfamiliar with the Coda Slider, it initially hides the overflow-x position until a tab is clicked. This triggers an animation that slides the hidden DIV in either from the right or left side. ...
When collapsing the screen, I encountered an issue with the dropdown items being inside the navbar. I positioned the dropdown menu as absolute, but some items were getting cut off, and I didn't want the scroll bar to appear. Despite trying to use medi ...
Currently leveraging Wpbakery for my website design. Seeking to apply the FadeInUp animation solely to the background image rather than the entire row. Any suggestions on accomplishing this? Is there a method to assign a class solely to the background i ...
I've been trying to customize the font color of a navigation link using ui-router's ui-sref functionality, but I'm facing an issue. While I can change the background color by adding it to the .active class in my CSS, the font color remains u ...
Let's talk about the scenario: https://i.stack.imgur.com/we05U.png In the image, there is a container (displayed as a div) with only one child - a span element. The goal is to introduce a second child that occupies the entire red space depicted in t ...
Currently, I am utilizing Bootstrap 5 (v5.2.1) along with a form on my website. I am attempting to customize the default styles for form validation. Specifically, I want to modify the colored 'tick' or 'check' icon that is displayed wh ...
const displayPreviewImage = (imageUrl) => { $('#slideshow-container').css("background-image", `url('files/images/store/content/templates/websites/preview_images/${imageUrl}'`); } I have a function here th ...
I am trying to achieve a specific background effect starting from the line shown in the screenshot below: I attempted to implement it using the following CSS code: background : ('path/to/image') 0 650px repeat-y However, the light part of the ...
I have a React functional component that utilizes state. Since v16.8, functional components can have state and I am using useEffect to manage the state variable products. I am passing the products as a prop to the child component "ProductGrid". The paren ...
I've come across similar questions before but still can't wrap my head around it. Here's my dilemma: I want the index page of my website to display in desktop layout on desktops and mobile jquery on mobile devices. Currently, I have set up m ...
I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...
When styling with an inline style and passing in the URL of an image file, I typically do it as shown below: let url = `url(${this.state.logo})` var cardStyle = { backgroundImage: url, backgroundSize: '200px 50px' ...
Recently, I delved into the world of React.js and came across controlled inputs. Sample Code: Check out my simple implementation: import React, { useState } from 'react'; const MyForm = () => { console.log('rendered'); // Li ...
Currently, I am developing a tile-based game using a traditional method (utilizing two for loops) and struggling with writing collision detection. I want the blue square to remain on the screen and appear on top of the tiles once the start button is clicke ...
Is there a way to utilize URLSearchParams while testing with Jest? Every time I attempt to do it, the following error occurs: ReferenceError: URLSearchParams is not defined ...
Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...
I have a code snippet that displays 4 items in a row, each with a bordered column to showcase the size. Within each column, there is a fixed-width and height wrapper that showcases an image and text. Is it possible to minimize the space between columns f ...
Hey there, I'm currently working on setting up this Docker file: FROM node:14.19.2 LABEL author="Salem Alsaggaf" LABEL description="A react app" LABEL maintainer="Salem Alsaggaf" ENV PORT=3000 COPY . /app WORKDIR /app VOL ...
In a React application, I am creating a straightforward autocomplete feature. The code is outlined below. index.js import React from 'react'; import { render } from 'react-dom'; import Autocomplete from './Autocomplete'; co ...