Imuplse Theme: Large image text box transparent

[Gratinsta]

Hi,

I want to change the large image text box color to transparent and get its alignment to center of the image. I am not able to do this in admin section. Please help

My store: https://gratinsta.com/

Password: gratinsta1

For reference I want make it look like this (https://jnitin.com/) and my store currently looks like last image

[Hardik29418 · Accepted solution]

@Gratinsta 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-1626625486fd2551e0 .background-media-text__inner .animation-cropper {
position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#shopify-section-1626625486fd2551e0 .background-media-text__inner .animation-cropper .background-media-text__text {
    background: transparent;
    border-color: transparent;
    text-align: center;
}

[Hardik29418 · Accepted solution]

@Gratinsta 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.background-media-text__inner .animation-cropper .background-media-text__text {
    background: transparent;
}

[Hardik29418 · Accepted solution]

@Gratinsta 

.animation-contents .background-media-text__text p.h3 {
color: #ffffff !important;
}

[Hardik29418 · Accepted solution]

@Gratinsta 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-1626625486fd2551e0 .background-media-text__inner .animation-cropper {
position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#shopify-section-1626625486fd2551e0 .background-media-text__inner .animation-cropper .background-media-text__text {
    background: transparent;
    border-color: transparent;
    text-align: center;
}

[Gratinsta]

Hi,

Thank your for response! It has been of great help! I was able to get transparent background and alignment at center 

1. How can I change color of HOME DECOR and Border color to white?

2. I want to edit same settings for another section - Jewelry, Can you please guide what to do ?

3. I am facing issues on mobile for these images as attached - the alignment is not proper for HOME DECOR and image is getting cropped with gray background for JEWELRY

Can you please advise on how do it make these changes?

[Hardik29418]

@Gratinsta  Please remove my old code and put my below code

.background-media-text__inner .animation-cropper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.background-media-text__inner .animation-cropper .background-media-text__text {
    text-align: center;
}

@media only screen and (max-width: 768px) {
.background-media-text__inner {
    position: unset;
}
}

[Gratinsta]

Thank you for this! I am able to the alignment to center om destop as well as mobile but background color is white again. How can I make this transparent?

[Hardik29418 · Accepted solution]

@Gratinsta 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

.background-media-text__inner .animation-cropper .background-media-text__text {
    background: transparent;
}

[Gratinsta]

Thanks a ton! You are awesome 🙂

[Gratinsta]

Is it possible to change color of only large box text headings to white? and keep rest of the store's text in black?

I couldn't find such a setting in theme color 

[Hardik29418 · Accepted solution]

@Gratinsta 

.animation-contents .background-media-text__text p.h3 {
color: #ffffff !important;
}

[Gratinsta]

@Hardik29418 

When accessing the website on mobile, the texts and button label HOME DECOR / EXPLORE and JEWELRY/ EXPLORE fades away and is not visible anymore.

Any suggestions if this can be fixed? The website is working fine on desktop.

[Hardik29418 · Accepted solution]

@Gratinsta 

@media only screen and (max-width: 768px) {
.background-media-text__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
}

[Gratinsta]

@Hardik29418  

Is it possible for me to move the Text and Shop Now button in large image section to right than center?

 

me do so.

[Hardik29418]

@Gratinsta 

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

[Gratinsta]

Website:

https://gratinsta.com/

[Hardik29418]

@Gratinsta 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

..background-media-text__inner .animation-cropper {
    right: 0%;
    top: 50%;
    left: unset !important
}

[Gratinsta]

Hi @Hardik29418 ,

I tried implementing that code and for some reason its not working.