Медиа-запрос CSS, примененный к обмену onchainkit, не будет работать ⇐ CSS

[Anonymous]

Я пытаюсь переместить свой своп вниз по мере того, как экран, на котором просматривается веб-сайт, становится больше. Для меня и моего приятеля по кодированию все выглядит хорошо, но медиа-запросы просто не работают. Я обернул своп в div под названием «swap-communities», а затем привязал медиа-запросы к этому div, а также правильно импортировал файл css. Я не уверен, почему медиа-запрос не применяется.
swapPosition.css
.swap-components {
margin-top: 0; /* Default margin */
}

@media (min-width: 768px) { /* Medium devices and up */
.swap-components {
margin-top: 2.5rem; /* 40px */
}
}

@media (min-width: 1024px) { /* Large devices and up */
.swap-components {
margin-top: 5rem; /* 80px */
}
}

SwapComponents.tsx
import {
Swap,
SwapAmountInput,
SwapToggleButton,
SwapButton,
SwapSettings,
SwapSettingsSlippageInput,
SwapSettingsSlippageTitle
} from '@coinbase/onchainkit/swap';

import { useAccount } from 'wagmi';
import type { Token } from '@coinbase/onchainkit/token';
import Image from 'next/image';
import brettPic from './images/brettPic.png';
import ethL from './images/ethL.png';
import usdcLL from './images/usdcLL.png';
import sigL from './images/sigLL.png';
import './swapPosition.css';
import './swapStyles.css';
import './swapFont.css';
import './swapInp.css';

import { WalletComponents } from './WalletComponents';

export default function SwapComponents() {
const { address } = useAccount();

const ETHToken: Token = {
address: "",
chainId: 8453,
decimals: 18,
name: "Ethereum",
symbol: "ETH",
image: ethL.src,
};

const USDCToken: Token = {
address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
chainId: 8453,
decimals: 6,
name: "USDC",
symbol: "USDC",
image: usdcLL.src,
};

const TESTToken: Token = {
address: "0xA79B01ABB577BC0c1a01ee80Cb677ce34df5E889",
chainId: 8453,
decimals: 18,
name: "Test",
symbol: "ASND",
image: sigL.src,
};

const swappableTokens: Token[] = [ETHToken, USDCToken,TESTToken];

const isWalletConnected = !!address;

return (





Slippage







{/* Disable the SwapButton if the wallet is not connected */}


{!isWalletConnected && (

Please connect your wallet to swap.

)}


);
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... -wont-work