Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 7, 2022 at 7:41 am #1364160
    Sozo

    First, a quick thank you. You guys are amazing and work very hard to help all of us with our various issues, often repeating yourselves time and time again. Your hard work and dedication are very much appreciated and I can’t simply say thank you enough. My recent project was an absolute success because of all of you and I’m truly greatful, so thank you. thank you.

    On to the question…

    in the shop options, we now have the option of uploading a banner (THANK YOU!) and a shop description but we aren’t given much control over those two things. The banner worked out fine, it does what I needed by default so that’s cool. On the description, which I’m using as a page title all we can really do is change the font color. It’s great and I appreciate it, was just hoping for greater control. Other than adding an H tag, we can’t really do much.

    I would like to add a custom CSS class so that I can add a drop shadow behind the title text as I do on the other pages. Those options are normally found in the developer tab of the element and we don’t have that option here. Inspecting the element just shows a container and a H1 tag, so I need help.

    How can I go about adding a drop shadow to that area? It would also be nice to set the font size for the various devices too but I can wait on that one. LOL

    Thanks Again!

    September 7, 2022 at 10:26 am #1364173
    Ismael

    Hey Sozo,

    Thank you for the inquiry.

    You can actually use html tags in the description field and add some css to adjust the style of the elements. To adjust the style of the default elements in the banner for example, you can use this css code.

    #av_product_description  * {
    color: red;
    font-size: 99px;
}

    To add a drop shadow to the description text, use this css.

    #av_product_description p {
    text-shadow: 0 2px black;
}

    Best regards,
    Ismael

    September 7, 2022 at 11:02 am #1364179
    Sozo

    Ismael, You’re fantastic!

    Thanks so much for all your help, I really appreciate it. I had to make a small adjustment but you got me where I needed to be.

    As far as the text sizes for the different devices how do we handle that? I tried using the @media only screen and (max-width: ) for the various sizes but didn’t have any luck.

    I look forward to hearing your solution.

    Thanks for the help!!

    • This reply was modified 2 years, 2 months ago by Sozo.
    • This reply was modified 2 years, 2 months ago by Sozo.
    September 8, 2022 at 8:55 am #1364289
    Ismael

    Hi,

    Glad to know that the suggestions above are working. To control the size of the product description on different screen sizes, please try this css code.

    #av_product_description p {
  font-size: 44px;
}

@media only screen and (max-width: 1024px) {
  #av_product_description p {
    font-size: 38px;
  }
}

@media only screen and (max-width: 989px) {
  #av_product_description p {
    font-size: 32px;
  }
}

@media only screen and (max-width: 767px) {
  #av_product_description p {
    font-size: 24px;
  }
}

    Please make sure to purge the cache after adding the css.

    Best regards,
    Ismael

    September 8, 2022 at 9:49 am #1364295
    Sozo

    Amazing, as always! Thank you so much!!

    If someone happens upon this solution in the future and you happen to use an H1 tag, simply replace the “p” in the solution for h1 and it will work perfectly.

    Thank you again for all your help!

    September 8, 2022 at 12:51 pm #1364326
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Shop Options > Discription Text’ is closed to new replies.