Product Description and price does not show on mobile

In addition, I was provided this code by somebody at woocommerce, It makes my product titles align perfectly even though my product pictures are different shapes(square, circle, rectangle). This code works perfectly for my needs. If there is anyway to make my product titles and price reappear without touching this code that would be awesome. All my product titles and prices align perfectly on desktop, notebook, tablet, and when smartphone turned sideways. Only when phone is vertical the product title and price disappear. Any help would be greatly appreciated thanks again.

.content-product {
position:relative;
height:450px;
}
.product-details {
position:absolute;
width:100%;
top:350px;
}
@media (max-width:480px) {
.content-product {
height:370px;
}
.product-details {
top:290px;
}
}
@media (max-width:320px) {
.content-product {
height:290px;
}
.product-details {
top:190px;
}
}

No I have not sorted it out, and it would help me out alot if this is made possible. I will re apply the code right now and if there is any way to work it out that would be great because it all works perfectly and is aligned except for when smartphone is vertical. Any help would be appreciated, thanks

With respect, you have to understand I do not know much about coding and all this stuff. All I know is that for a long time I have been looking for a solution to getting product titles aligned. I have products that are square and rectangle, they cannot be the same size, if I stretch the square picture out it does not look right. If you see my site you will notice all of this. I wanted a way to align product titles without touching the product photo. If all my products were rectangle I would not have this problem.

For some odd reason every ecommerce site on the web are able to get their product titles aligned with different shaped photos. With woocommerce it seems difficult. I have another website with same problems. I found a ecommerce store, that sales what I sale, that uses wordpress woocommerce, and all of their product titles were aligned. I took that to the woocommerce support forum and asked if they can replicate this and they did. That code that I posted is what they gave me. Before that woocommerce gave me other alternatives regarding reshaping the square images but it would be a misrepresentation of my product. I save all my main product photos x1500 and with the square, and round shapes I get a problem with alignment.

All I want to achieve is a way to just make my product titles align without touching the product photo, I have unusual product and the way it is displayed is very important. I do not like it when my product titles are not aligned it does not look professional. I do understand that this has mostly to do with woocommerce, but even they couldn’t find me the solution I was looking for.

That code worked, if there is any way to adjust it so it will work on mobile that would be awesome. If you have an alternative solution to my problem that would be awesome too. You have helped me out on numerous things and I highly appreciate it. I apologize for any frustration this may have caused you, and any help on this matter is greatly appreciated. Thank you