Hide a section on the product page on mobile only

[aestheticanvas]

Hello there,

I have made some changes to have my title and star rating appear before the image on mobile only, it works well on desktop as everything stays the same however, on mobile the star ratings are showing twice and I would like to hide the one showing at the bottom as I would like to have the star rating just below the title on mobile without affecting the desktop view.

Here is a link to one of my product pages, you can see the star ratings are appearing twice on mobile, I would like to hide the bottom one.

Thank you in advance for your time and help.

Kind regards,

[Guleria]

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

@media only screen and (max-width: 767px) {
.desktop-rating-stars { 
    display: none !important;
}
}

[aestheticanvas]

Hello, Thank you for your prompt answers.

Unfortunately, I have tried these three different codes and it still doesn't work, I am not sure why.

For more context, please find below screenshots of my product.liquid codes the first screenshot shows the liquid code that renders the stars above the image on mobile. And the second screenshot shows the code that should only render the stars on desktop.

Additionally, here is a screenshot of my CSS codes added to base.css:

Thank you again for everyone's precious time and help.

Kind regards

[aestheticanvas]

I've finally figured it out, I used some HTML directly in the product.liquid file as follow:

<style>
/* Hide the desktop-rating-stars element on screens narrower than 750px (mobile) */
@media screen and (max-width: 749px) {
.desktop-rating-stars {
display: none !important;
}
}

Just above this code:

<div class="desktop-rating-stars">
{% for block in section.blocks %}
{% case block.type %}
{% when 'rating_stars' %}
{% render 'rating-stars-block', block: block, margins: true, block_attributes: true %}
{% endcase %}
{% endfor %}
</div>

Which finally worked.

Thank you everyone for your help and contribution!

[WalkYourStyle]

1. Go to 'Online Store' -> Themes

2. From your active theme click on the 3 dots (...) -> Edit Code

3. Inside the assets folder, locate the file 'base.css'

4. At the bottom of the file add

@media (max-width: 749px){
    .desktop-rating-stars{
        display: none;
    }
}

this code

[BSS-TekLabs]

- Here is the solution for you @aestheticanvas 
- Please follow these steps:

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media (max-width: 749px){
    .desktop-rating-stars{
        display: none !important;
    }
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.