Product review - Different position for desktop and mobile

Deutsch Diskussion Technische Fragen & Antworten
1

Hi!

We are using the Dawn theme for our shop and I just modified the code to change the position of the review section to be below the picture section: https://www.konsequent.co.at/products/bio-disteloel-seife-100-g-kaltgeruehrt

This looks fine for us on the desktop version, however, in the mobile version it does not look good.

So I would like to keep it like it is for the desktop version but for the mobile version I would like the review section to be displayed as it originally was - meaning under the product description text.

Could you let me know how I need to change the code to make this happen?

Thank you so much in advance!

Fiona

2

Hey Fiona @konsequent

Btw, this is the German community if you wanna chat about this in DE…

Test following in a test copy of Dawn first: you can use media queries in your CSS to target the mobile view of your site and adjust the positioning of the reviews by adding a class to your reviews and target that class with your media query.

Use CSS to change the positioning of the element by using the position property, and the bottom or top property to move it below or above the product description.

Example code to place at the bottom of the base.css :

@media only screen and (max-width: 767px) {
  .product-reviews {
    position: relative !important;
    bottom: 0;
  }
}

This will make sure that the product reviews are positioned at the bottom of the product description only when viewed on a screen with a width of 767px or less.

If any further questions, please consult an expert or post your question in this forum.

3

Hi!

Thanks so much, unfortunately that did not work in our case.

Thank you anyways! :slightly_smiling_face:

Best

Fiona