How can I move product prices above photos on mobile view?

[omero]

Hello

I need help moving product price above product photos. I need this for mobile view and for product pages.

My url is designsfordivine.com

I appreciate any help

Thanks very much

[suyash1]

@omero - this will need bit code editing, are you familiar with the coding?

[Made4uo-Ribe · Accepted solution]

Hi @omero 

I notice that you used the code that I give on your previous post. But you change the top size which will have a problem on the ipad scree or bigger screen on the phone. 

As you notice I give another top size on different size screen for the more lesser screen size. But anyway im just giving a friendly comment.

Try this for price.  I used 749px because that is the beginning size of the mobile/ipad sizes. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px) {
div#price-template--19358373314887__main {
    position: absolute;
    top: 40%;
}
}
@media only screen and (max-width: 460px) {
div#price-template--19358373314887__main {
    top: 35%;
}
}

• And Save.

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[omero]

Hello, thanks for clarifying your last solution. I appreciate your new solution as well. I make few changes to them because they are partly working, the positions didn't work for my phone

So I use iphone 13 pro myself, and when I use your exact css, the title is on top of product image. This is the same case for the price as well.

I understand there are screen sizes for mobile devices. I need to make it look proper for all mobile device types. I appreciate your answer, I just tried to adjust it so it doesn't overlap with other content (I am beginner on css)

Thanks very much

[Made4uo-Ribe]

Your welcome, I just notice it. That is really the hard part the screen sizes.