Featured Product Theme Section: CSS to move Title Above Media on Mobile

Store Design
1

Hello,

tl;dr What’s the CSS code to move the product title above the image on mobile?

The Featured Production section in theme builder displays desktop media side by side the title/price/description. But, on mobile, the title/price/description display under the media. I’d like to move the title above the media. So, the scrolling flow is → 1. Title 2. Media 3. Price/description.

What’s the CSS code to do this? Plan to code the CSS directly into the custom CSS section within the theme block/section.

Thank you,

J

2

Hi @jaip

I have understood the issue but for a better understanding, I need the store URL. It would be really helpful if you provide your store URL.

I look forward to hearing from you.

3

Hi Nidhi - sent you a DM.

4

Hi @jaip

Thank you for providing the store URL.

I am looking into it and update you as soon as possible.

5

Hi @jaip

I have checked the layout structure for the Featured Product Section and found that you need to use the two product titles. One for desktop (Hide in mobile) and one for mobile (Hide in desktop). It would be the easiest way for you to achieve your requirement. Because as I have seen, there is a review with the title in the same parent block. So if we move the product title using the CSS, the review will also move. So better to use two different product titles.

Let me know if you have any concern or share your theme so we can set the structure for mobile.