I have a page that has a flexbox spanning the width of the page. That flexbox has 3 items and is overflow:hidden and justify-content:space-between. The 3 items are Item1: 200px, Item2: 300px, and Item3: 200px. If the user resizes such that the screen is 600px, it can’t show all the items anymore, so the last

I am starting a new project with NextJS (version 14.2.13). I created the project using create-next-app, then I have imported two fonts from google fonts using the following code: ./app/fonts.ts import { Montserrat, Open_Sans } from 'next/font/google' export const montserrat = Montserrat({ subsets: ['latin'], variable: '--font-montserrat', display: 'swap', }); export const open_sans = Open_Sans({ subsets:

I’d like to create a div where the content div is hidden in its initial state. The content div would be ‘revealed’ from the bottom of the parent div as the user scrolls down the page. I’d also like to use an image (think mountains) that would sit at the bottom of the parent div…giving

I was trying to use inline styling, but suddenly the console is giving this error and ain’t letting me do one important task. each review in tour.reviews .mc_reviews .mcr_top .mcrt_left .mcrtl_pic .mcrtlp_container img(src=`images/users/${review.user.photo}`) .mcrtl_name= `${review.user.name}` .mcrt_mid .mcrt_right img(src="/images/star.png") img(src="/images/star.png") img(src="/images/star.png") img(src="/images/star.png") img(src="/images/star.png") .mcrtr_overlay(style={'width': `${(review.rating)*20}%`}) .mcr_bottom= `"${review.review}"` The above is a pug template where you can

Let’s say I have a Next.js/React project with one top-level component and many child and grand-child components. In the grand-child components there are div elements with classNames only including Tailwind’s classes ( e.g. className ="flex justify-between" etc). Is there a way to style all the div elements having some particular combination of Tailwind classes that

Let’s say I have a Next.js/React project with one top-level component and many child and grand-child components. In the grand-child components there are div elements with classNames only including Tailwind’s classes ( e.g. className ="flex justify-between" etc). Is there a way to style all the div elements having some particular combination of Tailwind classes that

I’d like to create a section where as a user scrolls, the content (copy) would scroll down and hidden behind a full-width image that is positioned at the bottom of the section. I’m hoping that someone much smarter than myself can help me take off my training wheels. Here’s a link to my work so

I have a site for vip transfers "odyssiatravel.gr" created with "Limme – Limousine Transfers & Car Dealer WordPress Theme" and for the booking purposes i use Chauffeur booking system. The issue is that from mobile devices, Location fields on the form are not clickable, cannot be filled. From desktop i can fill them. ONLY location

I am trying to find an elegant solution with little JavaScript to create carousel which can have one or multiple columns. With a click on the buttons, it should scroll to the next column(s). Idea (too much JS in my opinion): Create a grid grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); With JavaScript find out how many columns

I wrote a fullstack application with React frontend. I use daisyUI and tailwind for CSS. My application is deployed and accessible under https://cashflash.app The application displays correctly on desktop browsers. However, on mobile devices (tested on iPhone 12 mini and iPhone XR), the sign-in form (and all the others, I picked this one as an