Kevin Powell - Community•3mo ago

Mobile Tailwind styles

🌊 Hi y all i m on the polish stage before posting a proj, (using Tailwind) currently looking for ways to place/allign the imgs child of the service-section above the desc-text in the mobile screens , I couldn t find a class to make this happen, can somebody help me with this pls? https://play.tailwindcss.com/V9SaYzT9M0

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

16 Replies

Chris Bolson•3mo ago

Just giving it flex should be enough. You already have flex-col defined but have limited your "flex" declaration to lg, md and xl. You don't need all of those declarations. You currently have this: xl:flex lg:flex md:flex flex-col xl:flex-row lg:flex-row md:flex-row That could be reduced to just this: flex flex-col md:flex-row The same with our places in your code such as your image tag. You currently have this on the img:

xl:mr-12 lg:mr-12 md:mr-12 ml-8 w-[250px] xL:w-[600px] lg:w-[600px] md:w-[600px] h-[400px] xl:h-[400px] lg:h-[400px] md:h-[400px] rounded-[2rem] mb-4

That could be reduced to this: mr-12 ml-8 w-[250px] md:w-[600px] h-[400px] md:h-[400px] rounded-[2rem] mb-4 With the breakpoints, unless you are changing the values as you get larger, you only need to define them for the minimum (breakpoint). You don't need to redefine them for each one.

Youseeit'sme•3mo ago

the styles as row for wide screen and column for mobile are way better wrotted the way you did

Youseeit'sme•3mo ago

I also tried to use the same logic for the images, but for some reason they re only show in the mobile screen above 400px width : https://play.tailwindcss.com/IgNUnAvmmR you can open it in mobile mode:https://estate-land.vercel.app/services_page/real-estate-brokerage

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

EstateLand

Web site created using create-react-app

Chris Bolson•3mo ago

Somewhere in your CSS have a media query which is moving the images down 125%

@media (max-width: 499px) {
  img {
    transform: translateX(125%);
  }
}

@media (max-width: 499px) {
  img {
    transform: translateX(125%);
  }
}

This is in your footer.css file, line 62

Youseeit'sme•3mo ago

hmm, that s confusing me, I m having 3 different compoents rendered in this page and the one that shows the imgs and the text / main context doesn t import the footer styles

Chris Bolson•3mo ago

I don't know how you are actually coding this but it looks like the footer CSS is global so it is affecting your components.

Youseeit'sme•3mo ago

The Footer css file imported in the Footer component affects the other components ?

Chris Bolson•3mo ago

I asume that is React. To be honest I don't know too much about React. However I can see that when it compiles the code, it combines all of the CSS files into a single "main.css" file. Anything that is in that file can affect any of the HTML on the page. Your footer declaration for the image (presumably for the logo in the footer) is so general that it affects all the images on on the page. If you only want it to affect the footer images, you could add more specificity to the selector such as .footer-section img

Youseeit'sme•3mo ago

i just took out the css styles in the Footer component and imageas appear correct in all mobile screens now wow, I ved wouldn t think that the footer styles files could impact other components, i ll mention the class for logo img in the footer to avoid the issue btw, can you tell why the navbar logo moves to right whne menu button is clicked ?

Youseeit'sme•3mo ago

https://play.tailwindcss.com/8ZgkiL321i

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Chris Bolson•3mo ago

That is the way CSS styles work. Styles will effect anything (according to the selector). That is why they are called "Cascading" style sheets - the styles cascaded down, To avoid this you need to add specificity to target specific elements (such as with the example I mentioned). When you click on the hamburger menu icon to reveal the nav, the JavaScript is adding "ml-auto" to the logo. In pure CSS terms this is adding "margin-left: auto". As the parent is a flex element, by adding this class you are telling it to move over to the right as far as it can. To top it off, this is then hidden by the mobile menu which slides down over it and has it's own logo which is in a different location.

Youseeit'sme•3mo ago

I see , indeed what happens when menu btn is click the ml-auto styles was applyed to the element , my mind got distracted honestly cause I m rushing to get the responsive UI done today

Chris Bolson•3mo ago

I have just uploaded what I use for simple responsive navigation menus using Tailwind in case it is of any use to you. It is very basic and it doesn't use any JavaScript. It only requires the nav elements to be defined once. https://codepen.io/cbolson/pen/QWPRKzv

Youseeit'sme•3mo ago

looks pretty similar to the one I use,do you understand why the resonsive-menu does not slide-ou as mentioned when I click AiOutlineClose https://play.tailwindcss.com/uDygHde6Qb

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Chris Bolson•3mo ago

I'm afraid I can't help you there. You are using GSAP which I have never used and, as I mentioned earlier, nor am I overly familiary with React. That said, these lines might have something to do with it:

classNames={{
            enter: 'no-transition',
            enterActive: 'no-transition',
            exit: 'no-transition',
            exitActive: 'no-transition',
          }}
          unmountOnExit

classNames={{
            enter: 'no-transition',
            enterActive: 'no-transition',
            exit: 'no-transition',
            exitActive: 'no-transition',
          }}
          unmountOnExit

If you haven't already done so, have a play around with them as they would seem to indicate the exit animation.

Youseeit'sme•3mo ago

will took a look more in depth after I take dinner, thx man , i appreciate it 🫶

Gaming

Programming

Mobile Tailwind styles