Questions & Answers

I am trying to apply an onhover effect for a viewport larger than 768px. Below 768px it should look like the elements are "always onhover". Specifically, on desktop or larger devices in general, there should be a background in a box at onhover. This background should always be shown on mobile, i.e. <768px in my case.

What am I doing wrong? Here are the snippets.

JSX-Snippet:

import { features } from "../constants"; import styles from "../style";

const FeatureCard = ({ icon, title, content, index }) => (   
<div className=
 {` 
   flex flex-row p-6 rounded-[20px] 
   ss:max-sm:feature-card-small  
   sm:feature-card
   ${index !== features.length - 1 ? "mb-6" : "mb-0"} 
 `}
>
<div className={`
    w-[64px] 
    h-[64px] 
    rounded-full 
    ${styles.flexCenter} 
    bg-dimBlue`
}>
    <img 
        src={icon} 
        alt="star" 
        className="
            w-[50%]
            h-[50%] 
            object-contain"
    />
</div>
    <div className="flex-1 flex flex-col ml-3">
       <h4 className="
           font-poppins
           font-semibold 
           text-white 
           text-[18px] 
           leading-[23.4px] 
           mb-1">
        {title}
       </h4>
      <p className="
          font-poppins 
          font-normal 
          text-dimWhite 
          text-[16px] 
          leading-[24px]
      ">
        {content}
      </p>
    );

    export default FeatureCard;

CSS-Snippet:

.feature-card:hover { background: var(--black-gradient); box-shadow: var(--card-shadow); }

.feature-card-small { background: var(--black-gradient); box-shadow: var(--card-shadow); }

• simply apply feature-card as class without viewport specification works as expected; onhover --> background changes
• different viewport-specifications (sm:..., ss:max-sm and sm:) and creation of different CSS classes (so there can be no overlap for sure) did not work

sorry if the code block looks like a mess here on stackoverflow. my first post, still learning.