Narrative “Image with text” wrong placement on mobile version

Solved
Tourist
6 0 1

What’s up Shopify community!

 

I have a problem. My website shoes up fine on the desktop version, but the on mobile it doesn’t. What shows up messed up is  the picture within a “image with text” section. It shows only half of the picture.

 

I guess you could change this with some sort of coding and that’s not something I know anything about. 

 

Any help is appreciated.

0 Likes
Shopify Staff
Shopify Staff
127 7 13

Hi, @JonathanWolf

 

Thank you for reaching out to the community about that. If you'd like to send me a screenshot of what your "image with text" section looks like on desktop vs. what it looks like on mobile, I can get a better sense of what's going on there! Depending on what is causing that, this may be something our themes team can help you with (subject to our Design Policy). Let me know, and I'd be happy to look into that for you.

Brie | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

1 Like
Tourist
6 0 1

Hi Brie!

I'm thankful for your reply.

Im sorry for returning so late.

please let me know if thi is the wrong forum.

Here are the pictures:

The Indestructible Cable – CablesStore.pngAs you can see the picture and video seem merged.2019-11-30 13_50_22-The Indestructible Cable – CablesStore.pngHere everything displays perfectly.

0 Likes

Hello ,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 .feature-row__image-crop--none .feature-row__image {
  height:auto !important;
  padding: 50%;
 }
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Tourist
6 0 1

Thank you for your response!

Althogh when I insert the code nothing appears on the website.

The Indestructible Cable – CablesStore.png

0 Likes
Shopify Staff
Shopify Staff
127 7 13

Hi, @JonathanWolf

 

Thank you for your response and for the screenshots! Subject to our Design Policy, we should actually be able to make that change on your behalf, so it will display the whole image instead of cutting it off. If you like, I'd be happy to get that process started for you. If you didn't want to use some of your free design time for that, then you're also welcome to continue working with the partner above if they're able to continue helping you out with the coding there. Let me know! 

Brie | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

1 Like

@JonathanWolf,

actually by mistake I put extra "}'

 @media only screen and (max-width: 749px) {
.feature-row__image-crop--none .feature-row__image { height:auto !important; padding: 50%; }
}

Please add above css

 


@JonathanWolf wrote:

Thank you for your response!

Althogh when I insert the code nothing appears on the website.

The Indestructible Cable – CablesStore.png


 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Tourist
6 0 1

Thank you!

That kind of solves the problem. It doesn’t look as cropped in anymore. But it still doesn’t look natural.

Would it be possible to put some sort of gap in between the picture and video!

Really appreciate your help!

0 Likes

Success.

@JonathanWolf,

Please add below css

 @media only screen and (max-width: 749px) {
.feature-row.feature-row--1478026923193.feature-row--large.feature-row__image-crop--none.feature-row-mobile--bottom {
	margin-bottom: 20px;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
Highlighted
Tourist
6 0 1
Thank you very much that solves it completely!
1 Like