CSS to style mobile view

Site URL: http://rosellanyc.com

Hi all,

I've been working on a site (not published yet) and I've finally gotten the homepage set and ready.  However, I HATE the mobile view.  I'm wondering if anyone has any help or suggestions on how to code for the text to be placed differently; as well as a different point of view on the bird. I envision more mobile than computer traffic for this site so it has to look it's best.

I've already added a custom CSS code for media views like so (below) but nada. 

Any help would be greatly appreciated!

@media screen and (max-width: 640px) {}
@media screen and (max-width: 1024px) { }
@media screen and (min-width: 641px) { }
@media screen and (min-width: 1025px) {}

Which CSS did you use? Can you post here?

Also, can you describe desired layout on mobile?

@tuanphan it appears after late night tampering I deleted my CSS I had so I'm not sure anymore and back to the drawing board. (face palm)

For the desired layout, I would like the words to float above above the bird if it remains with the tail end. The horizontal order is fine, it's just not legible in the color over the image. So, if it were possible to make just the head of the bird appear (so change the focal point; not just where it crops the full screen version) then I would leave the text as is.