Debut image with text - make text block float over image slightly

Solved
Highlighted
Explorer
89 0 20

Hi, 

The title pretty much sums it up. I want it to go from this:

now.JPG

 

 

 

 

 

 

To this:

want this.JPG

Don't mind the other styling. I'm just talking about the text box floating slightly over the image. 

URL is lokalebloemetjes.myshopify.com

Any help would be appreciated!

1 Like
Highlighted
Shopify Partner
5983 881 2016

This is an accepted solution.

@augds 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px) {
.feature-row__text--left {
position: relative;
    left: -40px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
1590 347 465

Hey @augds,

Please add following code in your assets/theme.scss.liquid file.

.feature-row__text {   
    position: absolute;
    width: 55%;
    right: 0px;
}
.feature-row{
position: relative;
}
@media only screen and (max-width: 749px){
.feature-row__text {
 position: relative !important;
   width: 100% !important;
}
}

 

Hope this will work for you.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Explorer
89 0 20

Thank you @KetanKumar this worked great for feature row with image on left side. On the same page if you scroll down there is also one with image on right. Could you help me with this as well?

 

@media only screen and (min-width: 750px) {
.feature-row__text--right {
position: relative;
    right: -40px;
}
}

 

1 Like
Highlighted
Shopify Partner
5983 881 2016

This is an accepted solution.

@augds 

Thanks for it can you please add this one

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px) {
.feature-row__text--right {
    position: relative;
    right: -40px;
    z-index: 1;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like