Who wants to answer another Debut Theme, mobile version images issue?

New Member
1 0 0

Not a new topic I know, however I am sick of reading all this ish and not finding any resolution.  And the fact that I may have to hire a Shopify specialist has me ready to jump ship to BigCommerce or anything very quick.  If there has been a thorough answer with instructions already completed - please share the link.

I don't know coding really at all, but have read enough kinda know where to look but this is taking far too long.  So hopefully the info below shows I kind of went the right direction. The run down.

Debut Theme, Section with trouble is regarding "text - text columns with images"

Icon images look fine on desktop, not on mobile.  Not a new story.

Desktop View - https://i.imgur.com/FRqO9By.jpg

Desktop Code - https://i.imgur.com/rglFngU.jpg and https://i.imgur.com/c9aPQy2.jpg

Mobile phone view and code - https://i.imgur.com/OszdbgK.jpg and https://i.imgur.com/tI3kDj3.jpg

I am also aware of "Edit Code" location in Shopify with reading previous discussions etc. of hero.liquid and theme.scss.liquid - I just can't fiddle around any longer.

Side question - how does one know what Element portion from webpage "Inspect" (CTRL-SHIFT-I) corresponds with what Code Page elements in Shopify like the hero.liquid tabs etc.?  Is there mapping for the corresponding sections?

Thanks for any direction!! - I owe you a coffee.

 

 

 

 

 

0 Likes
Highlighted
Tourist
15 0 2

Hey, Dpen

For a problem like this, you need to have knowledge of CSS coding, especially about the media queries.

If you know a little bit CSS then you may want to try something like this in CSS

@media (max-width: 750px) {
.feature-row__image {
  max-width: 50%;
}

}

You can use inherited parent class to make this adjustment for particularly this section.

 

Regards,

Nitin

Nitin Sharma
0 Likes