Re: How to make Headline Over Photo on Mobile?

Solved

How to make Headline Over Photo on Mobile?

youmustit
Tourist
3 0 0

i want to make the Headline over the Photo in the Refresh theme. Everything i try to do, doesn't work. Using the Image with Text. Please help out if possible.  Edit: I Want it to be visible on mobile headline first > photo after.

youmustit_0-1716327736717.png

 

Accepted Solution (1)
JasmeetVT14313
Shopify Partner
232 51 61

This is an accepted solution.

@youmustit 
As you want to do it for specific section, try adding the below code to end of "component-image-with-text.css" file

@media screen and (max-width: 750px) {
#shopify-section-template--22758465831206__image_with_text_mVhpcH .image-with-text__grid {
    flex-direction: column-reverse;
}
}

 If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

Unlock Your Store's Potential with a Free Consultation!
Ready to boost your Shopify store's performance?
Book a Free Consultation and get a comprehensive Store Audit today!
Don't miss this opportunity to enhance your online business.

View solution in original post

Replies 5 (5)

JasmeetVT14313
Shopify Partner
232 51 61

Hi @youmustit 
Can you please share store URL so that I can guide you.

Unlock Your Store's Potential with a Free Consultation!
Ready to boost your Shopify store's performance?
Book a Free Consultation and get a comprehensive Store Audit today!
Don't miss this opportunity to enhance your online business.
youmustit
Tourist
3 0 0

Sure. Here is the link. https://www.youmustit.com/ The problem only happens on Mobile. On desktop it's showing image on Left, which is not a problem. Just mobile has no option of Title over the photo. 

JasmeetVT14313
Shopify Partner
232 51 61

This is an accepted solution.

@youmustit 
As you want to do it for specific section, try adding the below code to end of "component-image-with-text.css" file

@media screen and (max-width: 750px) {
#shopify-section-template--22758465831206__image_with_text_mVhpcH .image-with-text__grid {
    flex-direction: column-reverse;
}
}

 If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

Unlock Your Store's Potential with a Free Consultation!
Ready to boost your Shopify store's performance?
Book a Free Consultation and get a comprehensive Store Audit today!
Don't miss this opportunity to enhance your online business.
youmustit
Tourist
3 0 0

That indeed helped.

youmustit_0-1716379469390.png


What if i will want to do it For Future, other things in site? What code and where should that be added? I Am new to all the coding. I Found multiple articles here but nothing helped. The question is, how to know the "code/how an area is called"(Like you wrote in code for that specific section - shopify-section-template--22758465831206__image_with_text_mVhpcH .image-with-text__grid) is that written somewhere? 

JasmeetVT14313
Shopify Partner
232 51 61

@youmustit 
Glad it helped!

As for your query is concerned, it might depend upon the type of customisation you would be doing. It will be better if you can have basics of HTML, CSS so that you have understanding which will guide you with your queries.

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!


Unlock Your Store's Potential with a Free Consultation!
Ready to boost your Shopify store's performance?
Book a Free Consultation and get a comprehensive Store Audit today!
Don't miss this opportunity to enhance your online business.