Creating a responsive Image for desktop screens with the help of Tailwind and nextJS

I'm currently working on a component that displays a set of images with horizontal scroll. The challenge I'm facing is setting different dimensions for mobile/tablet screens and desktop screens. For mobile and tablet, I want the images to be displayed with width: 125px and height: 250px, while for desktop screens, I need them to have width: 250px and height: 520px.

Below is the code snippet I've tried so far:

import React from 'react';
import Image from 'next/image';

const recentGameItems = [
 { id: 1, icon: '/images/slot1.png' },
 { id: 2, icon: '/images/slot2.png' },
 { id: 3, icon: '/images/slot3.png' },
 { id: 4, icon: '/images/slot1.png' },
 { id: 5, icon: '/images/slot2.png' },
 { id: 6, icon: '/images/slot3.png' },
 { id: 7, icon: '/images/slot1.png' },
];

const V2Layout: React.FC = () => {
  return (
  <div className="flex overflow-x-auto no-scrollbar overflow-y-hidden items-center">
  <div>
    <div
      className="flex list-none font-semibold text-white"
      style={{ width: `${recentGameItems.length * 125}px` }}
    >
      {recentGameItems.map(recentGameItem => (
        <div
          key={recentGameItem.id}
          className="flex flex-col px-1 items-center justify-center"
        >
          <div className="w-250 h-250 md:w-125 md:h-250 bg-yellow-200">
            <Image
              src={recentGameItem.icon}
              alt={`Menu Icon ${recentGameItem.id}`}
              width={125} // Width for mobile and tablet screens
              height={250} // Height for mobile and tablet screens
            />
          </div>
        </div>
      ))}
    </div>
  </div>
</div>
);
};

 export default V2Layout;

If anyone has suggestions or solutions to help me address this issue, I would greatly appreciate it. Thank you!

Answer №1

I am not quite sure what the issue is with the code you provided. It seems like there may be some confusion about how media queries function in Tailwind CSS. Remember, when using media queries in Tailwind, you should start from small to big, with default sizes for small screens, md: for tablets, lg: for desktops, and so on.

For example:

<div class="w-[100px] h-[100px] md:w-[125px] md:h-[250px] lg:w-[200px] lg:h-[520px] bg-yellow-200"></div>

Check out this link for a live demo showcasing the concept:

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

Issues with displaying iframes on iOS devices, particularly iPhones

There is a strange issue I am encountering with iframes not displaying on certain phones while working perfectly on others. (They show up fine on all android devices) (However, they do not work on iphone 6 and 7 but surprisingly work on 7 plus, 7S, and a ...

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

What is the best way to create a 3x3 grid layout with 9 input text boxes that do not have a double border thickness?

I am having trouble creating an input square with 3 rows and 3 columns. The borders between each two input boxes are overlapping, resulting in a double thickness border. To see this issue in action, you can run the provided html. How can I fix this so that ...

How can I ensure perfect center alignment in CSS?

Is there a preferred method for centering elements using CSS? <div style="position: absolute; left: 50%;"> <div style="position: relative; left: -50%"> Centered content </div> </div> or simply <div style=" ...

The 'table' now has a new attribute named 'id', however, it was not designated as the primary key

Despite setting primaryKey: true, the error "A column called 'id' was added to the attributes of 'users' but not marked with 'primaryKey: true" is being thrown. The application was functioning properly until I turned it off yester ...

The Stripe payment form effortlessly updates in real-time thanks to the powerful @stripe/react-stripejs module

I am experiencing some difficulties with implementing Stripe payment in my Medusa-JS Next JS frontend. Whenever I enter card details in the checkoutForm, the entire StripePayment component keeps re-rendering every time I click on anything within the form ...

Display an image from the API that rotates when hovered over with the mouse

Currently, I am fetching data from pokeapi.co and dynamically inserting it into a table. This data includes various stats and an image. My goal is to make the image rotate when hovered over. While creating the table, I added an id="pokeImage" dynamically. ...

Display every div element if none of the links have been clicked

On my webpage at url.com/yourfirstpage/, all div elements are hidden by default with a display:none property. If we specifically target #sec1 by going to url.com/yourfirstpage/#sec1, only sec1 is displayed while the others remain hidden. But what if we acc ...

An easy guide to preloading header images in Next 13

My goal is to ensure that the page only renders once the header image has completely loaded, avoiding any blank space during the loading process. I'm currently utilizing the Next.JS Image component with the code import Image from 'next/image&apo ...

What is the best way to ensure the text in my paragraph div is aligned to the left and displays in a vertical line?

I am struggling to align the words in my paragraph to the left in a straight line, instead of the zig-zag placement they currently have. Any guidance on achieving this would be greatly appreciated. /* Styling for tablet-sized screen*/ @media (min-width ...

Unique CSS Styles for Border Radius

Is there a way to achieve rounded corners on only the top left and top right, but not on the bottom two corners of a div using a specific value for -webkit-border-radius? ...

Using JQuery for sliding left without having to use inline CSS

I am dealing with a situation on my website where I need to hide a sidebar when clicked. $('#sidebar').toggle('slide', 'left', 300) In addition, I have implemented a CSS style to hide the sidebar on mobile devices. #sidebar ...

What is the best way to reset input autocomplete styles?

I am working with a basic Bootstrap form that is submitted using JavaScript. Upon clicking the submit button, the data is processed and the input values are reset without the need to reload the page: if( json.success ) { $('#form_sendemail').f ...

Attempt to create a truncated text that spans two lines, with the truncation occurring at the beginning of the text

How can I truncate text on two lines with truncation at the beginning of the text? I want it to appear like this: ... to long for this div I haven't been able to find a solution. Does anyone have any suggestions? Thanks in advance! ...

The images on the carousel fail to load unless I adjust the window size

After investing countless hours into finding a solution, I am still unable to resolve this issue. The problem lies within my use of a Carousel and setting the images through a javascript file. Strangely enough, upon loading the page, only the first image ...

Enhance your Nextjs13 website by incorporating FAQ structured data snippets

I'm currently developing a blog using NextJs13 and Strapi, and on certain pages/posts, I have incorporated a FAQ section. The rendering of my page is done SERVER SIDE In the file [slug]/page.tsx, I implemented the following solution: const Place = a ...

Looking for assistance with implementing mouseover scrolling on an unordered list

I am attempting to create a scrolling effect on my UL element when the mouse hovers over it, but I am having trouble getting it to work. Here is the link to my fiddle: http://jsfiddle.net/MisterStorm/4ja9apqz/3/ and here is my code: $(document).ready( ...

Ensure that the dropdown <select> remains open even while filtering through options

I am currently working on implementing a mobile-friendly "filtered dropdown" design: https://i.sstatic.net/SYjQO.png Usually, a <select> control remains closed until the user clicks to open it. Is there a straightforward way to keep it always open ...

Utilizing Bootstrap in Laravel to align the heights of rows in adjacent columns

I am in the process of developing a calendar application that includes a header row and a header column. The layout displays six days in columns with a fixed number of time periods per day. <div class="row"> <div class="col-md c ...

Using CSS to overlay multiple text boxes onto an image at different positions

Can you help me solve this challenge? I have an image of a real property that will be randomly loaded into a DIV with a width of 200 pixels. The image needs to be resized to 200 pixels wide while maintaining its proportional height. Additionally, I have fo ...