Exploring the art of beautifying React.js with SCSS

I have been working on creating the homepage layout for a project using SCSS to style Reactjs with the assistance of an online course. However, I am facing an issue where my layout looks different from the one presented in the course even though I have applied the exact same styling. Any help or guidance would be greatly appreciated. Thanks in advance.

Expected :

https://i.sstatic.net/cYyPj.png

Result :

https://i.sstatic.net/Ykez1.png https://i.sstatic.net/638Nd.png

Styling Used :

    .homepage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 80px;
    }
    
    .directory-menu {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .menu-item {
        min-width: 30%;
        height: 240px;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid black;
        margin: 0 7.5px 15px;
    
        &:first-child {
        margin-right: 7.5px;
        }
    
        &:last-child {
        margin-left: 7.5px;
        }
    
        .content {
        height: 90px;
        padding: 0 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid black;
    
        .title {
            font-weight: bold;
            margin-bottom: 6px;
            font-size: 22px;
            color: #4a4a4a;
        }
    
        .subtitle {
            font-weight: lighter;
            font-size: 16px;
        }
        }
    }

Code Sample :

<div className='homepage'> 
        <div className='directory-menu'> 
            <div className= 'menu-item'> 
                <div className='content'> 
                    <h1 className='title'>HATS</h1>
                    <span className='subtitle'>SHOP NOW</span>
                </div>
            </div>
        </div>
        .
        .
        .
        .
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with PrimeNG Carousel width on mobile devices

Currently, I am in the process of developing a system interface with Angular and PrimeNG specifically for mobile devices. The main requirement is to have a carousel to display a set of cards. After evaluating different options, I decided to utilize the ngP ...

Retrieving Basic HTML Source Code in UITextView Without CSS Styling Using Objective-C

I am looking to make changes to HTML text within a UITextView. The original text was created using an HTML editor in the web version of the app and needs to be edited with a default font on iOS. Here is the simple HTML code for the text that needs editing ...

Attention: Two children with identical keys were found, ""

In my current project, I am utilizing ReactJS, NextJS 14, Tailwind CSS, and Framer Motion. When working with React, it's essential to assign unique keys to each repeated child component. In my case, this requirement carries over to NextJS as well. To ...

Create a circular shape using CSS that dynamically adjusts its size to match the width

Can you help me with a CSS challenge? I need to create circles around elements on a webpage, but my code is not working perfectly. The width of the circle is off and I can't seem to center it properly. The width does not match the content (it is alw ...

How can I ensure that a particular component type passes the typescript check in a react-typescript project?

I'm fairly new to using TypeScript, although I have a lot of experience with React (and prop-types). Recently, I've run into an issue when it comes to typing my components, specifically when another component is passed as a prop. I already have ...

The parameter cannot be assigned a value of type 'string' as it requires a value that matches the format '`${string}` | `${string}.${string}` | `${string}.${number}`'

I recently updated my react-hook-forms from version 6 to version 7. Following the instructions in the migration guide, I made changes to the register method. However, after making these changes, I encountered the following error: The argument being pass ...

Handling the width and borders of CSS cells that are positioned outside of a table

Welcome! I recently created a simple gantt organizer as part of a demo. My goal was to make the main table scrollable while keeping certain columns "frozen" for easy visibility when navigating through the data. To achieve this, I followed some advice found ...

Resetting component state in React Native is essential for maintaining the correct

I need to reset the state of specific states without affecting others. When a button is clicked, the values of present_count, total_count, present, and total should all be restored to their original state (0), while keeping the state of subjects and text u ...

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

Instructions on adjusting the height of a flexbox container to utilize the available space

I am facing a challenge in grasping the interaction between flexbox containers and other elements on a webpage. When I have only a flexbox on my page, everything works smoothly. However, when I introduce other elements, things start acting strangely. It se ...

Troubleshoot: Font Rendering Issue with CSS3 @font-face in Opera 11.x

Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup: In the ...

Troubleshooting: ngAnimate max-height failing to apply to specific element

Having integrated ngAnimate into a project to enhance animations, I've encountered some unusual behavior with a specific element. Let me provide some context: our website features a shop with categories and products within those categories. I am usin ...

Photo attached at the bottom of each container

Here is the link to my code snippet: fiddle. I am struggling with aligning shopping bag icons at the bottom of each box on my webpage. I want all boxes to have the same height, so I used display: table-cell; in the box_left div. However, placing the shopp ...

adhesive section on the left side with a defined lower boundary

I have a contact div that I made sticky using Bootstrap affix. <div id="contactForm" data-spy="affix" data-offset-top="400"> However, I am unsure of how to limit its bottom to the top of the next div. In other words, I want it to stay in place when ...

Best Practices for Populating Input Fields with Data in ReactJS After Fetching Data

Currently, I am working on fetching data from an API and I could use some assistance on how to set the fetched date in input fields. It seems like a very basic issue for beginners, but any help will be greatly appreciated. Below is the code snippet: expor ...

A guide to transferring user information from Node.js to React.js with the help of Express and MySQL

I am facing a challenge when trying to display the author's email in my posts. I initially attempted to accomplish this by joining tables in my posts route, but unfortunately, it is not working as expected. Below is the code snippet for my route: ro ...

Ensuring accurate properties are sent to popup notifications

As a newcomer to a React & ASP.NET project, I am facing a challenge in displaying upload status notifications. The task may seem simple, but I need help in figuring out how to create popup notifications that indicate which files have been successfully uplo ...

Tips for Accessing the TextInput Content in React Native

My code is currently experiencing a bug where I am getting an undefined object type when trying to console log user input. Below is the code snippet I am working with. Can you help me identify and correct the issue? export default function App() { con ...

YouTube videos cannot be embedded using an iframe on Firefox

I inserted a YouTube iframe code inside a div element. <div id="box"> <iframe width="300" height="315" src="//www.youtube.com/embed/82fn4mcNGJY" frameborder="0" allowfullscreen></iframe> </div> After applying CSS to sc ...

Navigating between articles using React.js and Next.js

Imagine a scenario with two articles (for the complete example, visit https://github.com/codebushi/nextjs-starter-dimension/blob/master/components/Main.js) import PropTypes from 'prop-types'; class Main extends React.Component { render() { ...