Help: Responsive Image Code Not Working Without Tabs

Shopify Discussion

Topic summary

A Shopify store owner implemented custom CSS to make product page images responsive, specifically targeting images embedded within product descriptions that were appearing distorted on mobile devices.

The Problem:

  • The original CSS was designed to work with tabbed product descriptions (created via an app)
  • After removing the tab app to make descriptions more visible, the responsive image code stopped functioning
  • Images are now displaying incorrectly again without the tab structure

Current Status:

  • The user has attempted to modify the CSS themselves but hasn’t succeeded in making it work without tabs
  • They’re seeking help to adapt the code for the new tab-free layout
  • The original CSS used a media query targeting .station-tabs-tabcontent img with max-width and auto height properties

Note: A screenshot was referenced showing the specific CSS code being used.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I have a piece of custom CSS in my store that makes product page images responsive, ensuring they display correctly on both mobile and desktop. Before implementing this code, the images within the description text appeared distorted and compressed on mobile devices.

Here’s the issue: this CSS was originally written when my product descriptions were displayed in tabs (generated by an app). However, I recently removed these tabs because they made the descriptions feel hidden and cramped. Now, after disabling the app, the code no longer works as intended.

Here’s the specific code I was using (also, see screenshot below):

@media screen and (max-width: 768px) {
.station-tabs-tabcontent img {
height: auto !important;
}
}

I tried adjusting the code myself, but I haven’t been able to make it work without the tabs. Could anyone help me modify this code to restore image responsiveness now that the tabs are gone?

Thanks so much for your help—I really appreciate it!

Capture d’écran, le 2024-11-20 à 17.12.14.png
Capture d’écran, le 2024-11-20 à 17.12.14.png309×539 32.3 KB

1 Like