search

adrianhajdin / project_music_player

Master modern web development by building an improved version of Spotify. With a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more, this is the best music application you can currently find on YouTube.
https://jsmastery.pro
1.01k stars 277 forks source link

Spotify Clone 2.0 Responsive Layout Issue #15

Open JCookDev opened 1 year ago

JCookDev commented 1 year ago

After following the "Build and Deploy a Better Spotify 2.0 Clone Music App with React 18! (Tailwind, Redux, RapidAPI)" tutorial, my app is improperly displaying the layout in the browser. I'm using a 13 inch MacBook pro. What do I need to adjust in order to get the layout to display properly?

Screen Shot 2022-11-04 at 12 29 52 PM

I'm not sure which of the following is the cause of the problem. But I did try manipulating the some of the css values, however this didn't fix the issue.

Screen Shot 2022-11-04 at 12 38 54 PM Screen Shot 2022-11-04 at 12 39 23 PM

These are the results I am seeking to get: (Without having to decrease the zoom value of my browser.)

Screen Shot 2022-11-04 at 12 30 24 PM
Rowee13 commented 1 year ago

I think it has something to do with the resolution of the MacBook. If you will inspect the screen inner width of your browser, it is only around 1440px. Since this project is using tailwind, maybe try to play around with the classNames to adjust the sizes of each component. Take the issue as a chance to explore responsive UI. This is also my concern in most tutorials since we all have different types of devices.

JCookDev commented 1 year ago

Thanks for your response! Yes, this is a great learning opportunity. I'm currently working on getting my desired results for the layout. By changing some of the css values from pixels to percentages, I was able to move closer to the end goal. I almost got the layout how I want it to look.

On Thu, Nov 10, 2022 at 12:02 AM Rowee Apor @.***> wrote:

I think it has something to do with the resolution of the MacBook. If you will inspect the screen inner width of your browser, it is only around 1440px. Since this project is using tailwind, maybe try to play around with the classNames to adjust the sizes of each component. Take the issue as a chance to explore responsive UI. This is also my concern in most tutorials since we all have different types of devices.

— Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_music_player/issues/15#issuecomment-1309778172, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYBRIALESYZVUXCBCGPOV4LWHR6VRANCNFSM6AAAAAARXLZHSQ . You are receiving this because you authored the thread.Message ID: @.***>

MadaraRU commented 1 year ago

I find this temporary solution : https://stackoverflow.com/questions/62249030/how-to-set-and-unset-a-body-zoom-level-in-react

a121121 commented 1 month ago

Hey mate did you get a solution for this problem. My static site was working fine, and now suddenly everything looks zoomed in and I have to zoom out to 67% to get the normal view