can someone help me with how to get a 1px black outline around the headings for example ‘special buys’ here
You can try to add this code to bottom of the file theme-custom.css
.slideshow__title {
display: inline-block;
border: 1px solid #000;
padding: 0px 10px;
}
i meant around the heading text, not a boarder around the text.
thankyou for trying though!
i meant around the heading text, not a boarder around the text.
thankyou for trying though!
Hi @joshualev ,
You can follow the instruction below:
- Go to Online Store->Theme->Edit code
- Asset->/theme-custom.css->paste below code at the bottom of the file:
@media (min-width: 767px) {
.slideshow__content-wrapper {
max-width: 600px !important;
border: 1px solid #000;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Hi @joshualev ,
You can follow the instruction below:
- Go to Online Store->Theme->Edit code
- Asset->/theme-custom.css->paste below code at the bottom of the file:
.slideshow__content-wrapper .slideshow__title {
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
1 Like
@AvadaCommerce That worked perfect thankyou!! how would i do this around the text beneath special buys ‘less than half price’ ?
1 Like
Hi @joshualev ,
You can try replace previous code by below code:
.slideshow__content-wrapper .slideshow__title,
.slideshow__content-wrapper .slideshow__content {
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
@AvadaCommerce thankyou this worked very well. great solution!
would you also be able to help me with how to do the same thing with the outline but on this part of the website?
Hi @joshualev ,
You can try replace previous code by below code:
.slideshow__content-wrapper .slideshow__title,
.slideshow__content-wrapper .slideshow__content,
.promo-block__heading,
.promo-block__cta {
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
@AvadaCommerce thankyou so much for the help! works fully i have updated it now but i changed the code to this:
.slideshow__content-wrapper .slideshow__title,
.promo-block__heading,
.promo-block__cta {
text-shadow: 2px 0 0 #61737C, -2px 0 0 #61737C, 0 2px 0 #61737C, 0 -2px 0 #61737C, 1px 1px #61737C, -1px -1px 0 #61737C, 1px -1px 0 #61737C, -1px 1px 0 #61737C;
}
.slideshow__content-wrapper .slideshow__content,
.promo-block__heading,
.promo-block__cta {
text-shadow: 1px 0 0 #61737C, -1px 0 0 #61737C, 0 1px 0 #61737C, 0 -1px 0 #61737C, 1px 1px #61737C, -1px -1px 0 #61737C, 1px -1px 0 #61737C, -1px 1px 0 #61737C;
}
Hi @joshualev ,
You try copy below code which I merged:
.slideshow__content-wrapper .slideshow__title,
.slideshow__content-wrapper .slideshow__content,
.promo-block__heading,
.promo-block__cta {
text-shadow: 1px 0 0 #61737C, -1px 0 0 #61737C, 0 1px 0 #61737C, 0 -1px 0 #61737C, 1px 1px #61737C, -1px -1px 0 #61737C, 1px -1px 0 #61737C, -1px 1px 0 #61737C;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
@AvadaCommerce how would I make the text ‘for you and your baby since 1943’ bigger on mobile so it looks less pixelated with the outline around it on mobile?
Hi @joshualev ,
You can try below code in theme-custom.css file:
@media (max-width: 767px) {
.slideshow__content-wrapper .slideshow__content {
font-size: 18px !important;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.