Mobile product pages begin with an image how to change

Hi there.

I have a product display page that shows the product image on the left, but that means when viewed on mobile the page begins with the product images rather than the name of the product and details.

Has anyone found a nice way to fix this - for example some custom cost that would swap the columns around on mobile so the image block would appear second (as though the product images loaded on the right hand side of the page).

Thanks for any help

14 minutes ago, GlynMusica said:

Hi there.

I have a product display page that shows the product image on the left, but that means when viewed on mobile the page begins with the product images rather than the name of the product and details.

Has anyone found a nice way to fix this - for example some custom cost that would swap the columns around on mobile so the image block would appear second (as though the product images loaded on the right hand side of the page).

Thanks for any help

You can try this, let us know how it goes

.view-item .ProductItem-gallery {
  order: 2;
}
.view-item .ProductItem-details {
  padding-top: 20px;
  order: 1;
}

Thanks for this, but is there any way to put a condition in there so it just does this for mobile using viewport? I am not coder!

@media only screen and (max-width: 600px)
{ 
			.view-item .ProductItem-gallery {
			 order: 2;
			}
			.view-item .ProductItem-details {
			 padding-top: 20px;
			 order: 1;
			}
 }

I managed to get this to work with the following code so it will apply to mobile. I share here and thank you for your part.

G.