webpage design help!

Solved
njlee
Tourist
11 0 1

hi everyone! 

 

I appreciate your help on this.

 

How do I make the . become a different colour? The dot inside the black square..

I only want the . to become a different colour example green colour

 

Untitled.png

This is my website link

https://theimpossiblesauces.com/

 

Thank you

 

Accepted Solution (1)
a1anm
Excursionist
23 3 3

This is an accepted solution.

Replacing the custom html with the below should fix that:

 

<style>
.slideshow__text.banner__box.almo {max-width: var(--page-width) !important; margin: 0 auto; background-color: transparent;}
.ss-inner {background-color: #fff; width: 100%; height: 100%; padding: 75px;}
.banner__text {margin-bottom: 30px;}
@media only screen and (min-width: 750px) {
.slideshow__text.banner__box {padding: 5rem;}
.ss-inner {padding: 125px;}
}
@media only screen and (max-width: 750px) {
.banner__box {padding: 4rem 1.5rem !important;}
}
</style>

<div class="slideshow__text banner__box almo content-container content-container--full-width-mobile color-background-2 gradient slideshow__text--center slideshow__text-mobile--center">

<div class="ss-inner">

<h2 class="banner__heading h1">Welcome to The I<span style="color: #00883A;">.</span>mpossible Sauces Factory</h2>

<div class="banner__text">
<span>Ready-To-Eat | Convenient | Quality | Halal</span>
</div><div class="banner__buttons">
<a href="/collections/all" class="button button--primary">ORDER NOW</a>

</div>

</div></div>

View solution in original post

Replies 10 (10)
a1anm
Excursionist
23 3 3

You would need to add span tags around the dot.  For example it would look like this:

 

Welcome to the I<span style="color: green;">.</span>mpossible Sauces Factory

 

The other (not so good?) option would be to add that section as an image instead of text.

njlee
Tourist
11 0 1
OK for first solution can u help show me where to add the solution pls ?

As in which section etc etc

Sorry i am a newbie to this.

Tqvm !
a1anm
Excursionist
23 3 3

I would add it wherever you added the existing text. Just replace what you have with the example I provided above. You may need to add it as a Custom HTML block.

 

If you can't get it work please include a screenshot of how you have added the existing content.

njlee
Tourist
11 0 1

Hi sorry unable to make it work... i cannot find the existing content in the Edit Code section

I added the information through here..... pls help thank you

 

Untitled.png

a1anm
Excursionist
23 3 3

Give this a try:

 

- In the left column select Add Section > Custom Content

- Hide any of the existing blocks that are added to the Custom Content section

- In the Custom Content section click Add Block > Custom HTML

- In this block paste the below:

 

<div class="slideshow__slide grid__item grid--1-col slider__slide" id="Slide-template--15508447232140__slideshow-1" role="group" aria-roledescription="Slide" aria-label="1 of 1" tabindex="-1">
<div class="slideshow__media banner__media media"><img srcset="//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=375 375w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=550 550w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=750 750w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=1100 1100w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=1500 1500w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=1780 1780w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=2000 2000w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=3000 3000w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=3840 3840w,//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995 6000w" sizes="100vw" src="//cdn.shopify.com/s/files/1/0610/1991/4380/files/sauce_logo_Banner_Landscape_white.png?v=1662545995&amp;width=1500" loading="lazy" alt="" width="6000" height="3000"></div>
<div class="slideshow__text-wrapper banner__content banner__content--top-center page-width">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-background-2 gradient slideshow__text--center slideshow__text-mobile--center"><h2 class="banner__heading h1">Welcome to The I<span style="color: green;">.</span>mpossible Sauces Factory</h2><div class="banner__text">
<span>Ready-To-Eat | Convenient | Quality | Halal</span>
</div><div class="banner__buttons">
<a href="/collections/all" class="button button--primary">ORDER NOW</a>
</div></div>
</div>
</div>

njlee
Tourist
11 0 1

hi

 

I managed to do it but i have 2 issues

 

1. how do align it middle?

Untitled.png

 

 

 

2. for mobile view it becomes like this.. how do i fix this?

 

Untitled2.png

a1anm
Excursionist
23 3 3

Try replacing all of the code in the custom HTML block with the below:

 

<style>
.slideshow__text.banner__box {max-width: var(--page-width) !important; margin: 0 auto; background-color: transparent;}
.ss-inner {background-color: #fff; width: 100%; height: 100%; padding: 75px;}
.banner__text {margin-bottom: 30px;}
@media only screen and (min-width: 750px) {
.slideshow__text.banner__box {padding: 5rem;}
.ss-inner {padding: 125px;}
}
@media only screen and (max-width: 750px) {
.banner__box {padding: 4rem 1.5rem; !important;}
}
</style>

<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-background-2 gradient slideshow__text--center slideshow__text-mobile--center">

<div class="ss-inner">

<h2 class="banner__heading h1">Welcome to The I<span style="color: #00883A;">.</span>mpossible Sauces Factory</h2>

<div class="banner__text">
<span>Ready-To-Eat | Convenient | Quality | Halal</span>
</div><div class="banner__buttons">
<a href="/collections/all" class="button button--primary">ORDER NOW</a>

</div>

</div></div>
njlee
Tourist
11 0 1

hi that worked great! 

 

but i think it affected another part of the design...

the description i circled in black had a different colour background so that i can read the words.. like a bubble

i tried changing the Colour Scheme on the right side but cannot.. 

 

hope i make sense... thank you 

 

Untitled.png

 

a1anm
Excursionist
23 3 3

This is an accepted solution.

Replacing the custom html with the below should fix that:

 

<style>
.slideshow__text.banner__box.almo {max-width: var(--page-width) !important; margin: 0 auto; background-color: transparent;}
.ss-inner {background-color: #fff; width: 100%; height: 100%; padding: 75px;}
.banner__text {margin-bottom: 30px;}
@media only screen and (min-width: 750px) {
.slideshow__text.banner__box {padding: 5rem;}
.ss-inner {padding: 125px;}
}
@media only screen and (max-width: 750px) {
.banner__box {padding: 4rem 1.5rem !important;}
}
</style>

<div class="slideshow__text banner__box almo content-container content-container--full-width-mobile color-background-2 gradient slideshow__text--center slideshow__text-mobile--center">

<div class="ss-inner">

<h2 class="banner__heading h1">Welcome to The I<span style="color: #00883A;">.</span>mpossible Sauces Factory</h2>

<div class="banner__text">
<span>Ready-To-Eat | Convenient | Quality | Halal</span>
</div><div class="banner__buttons">
<a href="/collections/all" class="button button--primary">ORDER NOW</a>

</div>

</div></div>
njlee
Tourist
11 0 1

yes fixed it! 

 

thank you so much for your help