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

Solved

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

omero
Explorer
58 0 12

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

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
8757 2093 2568

This is an 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. 

Ribe_Dagandara_0-1692522413662.png

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!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 4 (4)

suyash1
Shopify Partner
9970 1240 1577

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

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - [email protected] , My timezone is GMT+5:30.

Made4uo-Ribe
Shopify Partner
8757 2093 2568

This is an 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. 

Ribe_Dagandara_0-1692522413662.png

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!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
omero
Explorer
58 0 12

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
Shopify Partner
8757 2093 2568

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.