I'm wondering why my typography components display correctly on my local host, but not on my aws server. Any insights on

I've encountered an issue with the typography component I'm using for my headings. When I publish the website, the headings do not render properly and the styles are not applied correctly. Strangely, everything looks fine during npm run dev, but once I push it and build it on AWS, the display is off.

https://i.sstatic.net/A7ccI.jpg

https://i.sstatic.net/qVQ1S.jpg

 <Typography className={cardStyles.heading}>
        Rent a room or the whole place
      </Typography>
.heading{
    font-size: 22px;
    display:flex;
    justify-content: center;
    color: black ;
    margin: 16px 0px 0px 10vw; 
    margin-left: 10vw;
    padding-left: 20px;
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    width: fit-content;
    max-width: 100vw;


}

cssreactjsmaterial-uitypography

Answer №1

By swapping out the League Spartan font for a web-safe option, I was able to successfully resolve the issue.

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

Tips for waiting for a page to load in Selenium using Java

I am currently seeking a method to delay page execution until all elements have been fully updated. An example scenario would be waiting for a screen value to change after clicking a button, thus ensuring that the new value has been displayed. My objectiv ...

javareactjsselenium

The li::before pseudo element isn't working properly

I am having issues with my UL list where the CSS class I applied is not affecting the li::before pseudo class. Here's the HTML: <ul class="my-ul"> <li>Item 1</li> <li>Item 2</li> </ul> This is the CSS I a ...

htmlcsspseudo-element

Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving ...

jquerycsstwitter-bootstraptwitter-bootstrap-3carousel

Successfully generated files, now patiently awaiting typecheck results... encountering an issue with importing SASS modules

Issue Encountering a problem where adding SASS variables to TypeScript files causes the browser tab with an open devserver to hang, displaying Files successfully emitted, waiting for typecheck results.... Trying to figure out what's causing this iss ...

reactjstypescriptwebpacksasscreate-react-app

React component state remains static despite user input

I am currently in the process of developing a basic login/signup form using React, Typescript (which is new to me), and AntDesign. Below is the code for my component: import React, { Component } from 'react' import { Typography, Form, Input, But ...

reactjstypescriptantd

Orientation options for lists in Material Design React

Having an issue with the MDC React List where I am attempting to change the orientation to horizontal, but it always displays the list in a vertical layout. import List, { ListItem } from '@material/react-list'; import '@material/react-list ...

reactjsmaterial-uireact-tsx

Implementing a background image layered over a background color using CSS

Currently, I am in the process of converting a webpage from PSD format. The main content of the page is designed with a solid background color, but there is also a separate layer that features a glow effect on top of the background. However, when implement ...

htmlcssbackgroundpsd

Tips for avoiding the automatic conversion of 0.00 to 0.0 by prettier eslint

I am working on ComponentA and need to set the default value to 0.00. However, the formatting by prettier eslint changes it from 0.00 to 0.0 in the component file. How can we prevent this from happening? export const ComponentA = ({ validate, isRequired }) ...

reactjseslintprettiereslintrcprettier-eslint

CSS Grid having trouble with wrapping elements

Greetings to all, As a newcomer to the world of web development, I am currently exploring the wonders of the CSS grid tool. However, I have encountered a roadblock: My intention is for the cards to automatically flow one by one into the next row while ma ...

htmlcsslayoutcss-grid

What is causing Gatsby to lose familiarity with the components listed in the site-directory?

My previously functional gatsby site encountered an issue when I attempted to add functionality to the gatsby-node.js file by running npm install slug. After realizing that the new code was not working as expected, I reverted it. However, now the site is n ...

node.jsreactjsnpmgatsby

How to place a scrollable content below a fixed flexbox navigation menu

I am struggling with a certain snippet (best viewed in full screen mode) where I need to position the <main> element directly underneath the <header> element. The <header> is set in a fixed position to remain at the top of the screen whil ...

htmlcsscss-positionfixed

The issue I'm facing with the change handler for the semantic-ui-react checkbox in a React+Typescript project

Hey there! I'm currently facing an issue with two semantic-ui-react checkboxes. Whenever I try to attach change handlers to them, I end up getting a value of 'undefined' when I console log it. My goal is to retrieve the values of both check ...

javascriptreactjstypescripteventssemantic-ui-react

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

javascriptjquerycss

Is there a way to code an automatic way to trigger the opening of a Material-UI Select field?

If you're looking for the select field, check it out in the Material-UI demo here Although its methods seem to be inherited from the menu/popover classes, I've been struggling to trigger the 'open' action when the onFocus event occurs. ...

inheritancereactjsmaterial-ui

I am experiencing issues with the loading of CSS and JavaScript files in my recently created Laravel project

Recently, I received a Laravel project and successfully downloaded its configuration to get it up and running using php artisan serve. Upon attempting to access the project through localhost:8000, only the HTML content is displayed without any styling fro ...

phpcsslaravelbootstrap-4dependencies

Running Applications with React Using Command Line Interface (CMD)

I'm currently working on creating a .cmd file to handle the installation of dependencies and then execute my React application. Following some research, I have come up with the following code snippet inside my .cmd file: @echo off npm install pause np ...

javascriptnode.jsreactjsnpmnpm-install

Problem with background video height on Elementor for Wide screen resolutions

Hello, I trust this message finds you in good health. I have a question regarding the video background on wide/big screens. The issue is that it displays correctly on all devices in Elementor settings and actual testing, except for widescreen LCDs, where ...

htmlcsswordpressvideoelementor

Enhancing User Interaction: Tips for Focusing on Touch in React Input Text Field

Having a bit of an issue with my input component that works perfectly on desktop but seems to be malfunctioning on mobile. I can't seem to get it to focus on press, and all the solutions I'm finding are related to React Native which I'm not ...

htmlreactjsinputtouch

Is there a way to customize the design of this material UI form layout?

I created a checkout form using material UI, which currently looks like this: https://i.sstatic.net/ierCu.png Although it may seem minor, I want to modify the layout so that First Name and Last Name are on the same row, similar to this design (but I&apos ...

reactjsmaterial-ui

When using next-with-apollo, server-side rendering (SSR) is not functional as the request is performed

I am facing an issue with my code as I attempt to utilize https://github.com/lfades/next-with-apollo, next-with-apolo. Despite following the setup, server-side rendering (SSR) is not working for me and it seems like the client call is still being made. If ...

reactjsnext.jsapollo-client