Image with text section not working on Shrine Theme

Solved

Image with text section not working on Shrine Theme

robertbarta
Explorer
71 0 15

Hello, I am using a Shrine Theme on my Shopify store, and for some reason, the "Image with text" section isn't working correctly. Is anyone able to fix this? 

what is should look like.png

Accepted Solutions (2)
webwondersco
Shopify Partner
1186 171 174

This is an accepted solution.

@robertbarta PLease add the below line of CSS code at the end of your theme.liquid file. Just copy and paste this code just above the  </body> tag.

 

<style>
.image-with-text__grid{
align-items: stretch;
}
</style>

 

Result:

 

webwondersco_0-1713693307807.png

 

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

TerenceKEANE
Shopify Partner
512 86 80

This is an accepted solution.

Hi,

 

Using fixed values should be avoided. Otherwise, it may cause inconsistency in size when the screen size changes.

The following code will do what you want. If you encounter any issues again, feel free to write, I'll help.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

shopify.head.jpg

 

<style>

.section-template--16601856376987__image_with_text_RhiNBH-padding > .image-with-text__grid--reverse {
    align-items: unset !important;
}
  
</style>

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 6 (6)

webwondersco
Shopify Partner
1186 171 174

@robertbarta Hope you are doing well.

 

could you please share your store URL?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
robertbarta
Explorer
71 0 15
webwondersco
Shopify Partner
1186 171 174

This is an accepted solution.

@robertbarta PLease add the below line of CSS code at the end of your theme.liquid file. Just copy and paste this code just above the  </body> tag.

 

<style>
.image-with-text__grid{
align-items: stretch;
}
</style>

 

Result:

 

webwondersco_0-1713693307807.png

 

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

PageFly-Amelia
Shopify Partner
626 165 238

Hello @robertbarta 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.image-with-text__text-item {
   height: 645px;
}

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

robertbarta
Explorer
71 0 15

i don't have that file for some reason

TerenceKEANE
Shopify Partner
512 86 80

This is an accepted solution.

Hi,

 

Using fixed values should be avoided. Otherwise, it may cause inconsistency in size when the screen size changes.

The following code will do what you want. If you encounter any issues again, feel free to write, I'll help.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

shopify.head.jpg

 

<style>

.section-template--16601856376987__image_with_text_RhiNBH-padding > .image-with-text__grid--reverse {
    align-items: unset !important;
}
  
</style>

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites