Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #231816

    I notice that when I assign a link to an image that I have in a column, the entire width of the column becomes an active link instead of just the size of the image.

    #231821

    Hi D5WDesignGroup!

    Can you post the link to your website and point out the section so we can take a look?

    Cheers!
    Yigit

    #231830
    This reply has been marked as private.
    #231832

    Hi!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    #after_section_4 a {
    width: 210px;
    }

    Cheers!
    Yigit

    #231844

    That works for those but I’m assuming that is specific code for those images in those containers. How can I fix this in general for any other pages that will have links?

    #231848

    Hey!

    Will they be placed inside Color Section elements? If so, you can change the ID to match the ID of your color sections, in this case #after_section_4. You can edit Color Section and give specific ID’s to your color sections

    Best regards,
    Yigit

    #231851

    I don’t know where they will be placed yet but this has never been an issue in the past. Is there a way to fix this so that it works like it used to and I don’t have to add custom code for every link that I use?

    #231923

    Hi!

    Can you post a screenshot and show how do you insert these buttons to your page?

    Cheers!
    Yigit

    #231937
    This reply has been marked as private.
    #232089

    Hey!

    The images are set to inherit the size of the container. You need to set the width of a specific image inside a column layout using CSS. You can add a unique selector for each Avia Elements. Edit functions.php, find this code:

    if(isset($avia_config['use_child_theme_functions_only'])) return;
    

    Below, add this code:

    add_theme_support('avia_template_builder_custom_css');
    

    Edit any avia elements like the IMAGE element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome-image”.

    You can add something like this on your custom.css or Quick CSS:

    .avia_image.awesome-image {
    width: 210px;
    }

    Regards,
    Ismael

    #232326

    The problem with this is that it would only work for that sized image. What if I’m using images of different sizes? Like I said before this was never an issue in the past. I have used this theme for many different layouts and the image links have always worked fine.

    #232609

    Hi!

    How are you? I hope you feel great today. Thank you for the question.

    That is where the custom css selector will be useful. You can add different css selector for different Image elements then specify the width using Quick CSS.

    Regards,
    Ismael

    #232820

    How exactly do I do that?

    #233088

    Hi!

    If you follow the instructions above about adding the custom css support for avia elements. You’ll find a “Custom Css Class” field when editing an Image element or any other avia elements using the Advance Layout Builder. Add a unique css class selector like, “awesome-image” for example. You can then use that selector for that specific image element on Quick CSS:

    .awesome-image {
    width: 100px;
    height: 100px;
    }

    Regards,
    Ismael

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.