Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 3, 2013 at 9:43 am #195701
    vchemko

    Hello,

    We require assistance with changing the Max-Width and additional CSS of a main image. We have used the DeveloperID and created a class called mainimage. The mainimage class is located above the container which holds the content, button and image. The only CSS associated with the image we require to increase the max-width and apply additional CSS too is:

    .avia_transform .avia_start_animation.left-to-right.avia_image
    The image currently has Image Fade In Animation from Left to Right

    The rest of the relevant CSS we currently have on our home page is:

    <div id=”main”>
    <!– This is the DeveloperID –><div id=”mainimage” class=”avia-section main_color avia-section-large avia-shadow avia-builder-el-0 avia-builder-el-first container_wrap fullsize” style=”background-repeat: repeat; background-image: url(http://test.umamimarketing.com/wp-content/uploads/2013/08/noisy_grid.png); background-attachment: scroll; background-position: top left; background-color: #da332c; “>
    <div class=”container”>
    <main class=”template-page content twelve alpha units” itemprop=”mainContentOfPage” role=”main”>
    <div class=”post-entry post-entry-type-page post-entry-12″>
    <div class=”entry-content-wrapper clearfix”>
    <div class=”flex_column av_one_half first avia-builder-el-1 avia-builder-el-first “>
    <div class=”flex_column av_one_half avia-builder-el-5 el_after_av_one_half avia-builder-el-last “>
    <span class=”avia-image-container” itemtype=”http://schema.org/ImageObject&#8221; itemscope=”itemscope”>

    </span>
    </div>
    </div>
    </div>
    </main>

    What we have found is that other pages utilizing this CSS class from the Image Fade in Animation set to Left to Right. Are also pulling the CSS from the .avia_transform .avia_start_animation.left-to-right.avia_image class.

    Image Fade in Animation
    Add a small animation to the image when the user first scrolls to the image position. This is only to add some ‘spice’ to the site and only works in modern browsers

    We require additional assistance with getting the DeveloperID connected to the image class so that we can apply CSS without it effecting additional pages that have Image Fade in Animation set to Left to Right. Please let us know if there is anything we can do to fix this.

    Thanks,

    • This topic was modified 11 years ago by vchemko.
    December 4, 2013 at 12:09 am #195918
    Devin

    Hey vchemko!

    We’ll need to see an example of what you are trying to do with a screenshot or mock up as well as a live version of what you have now. I’m not clear on what it is you are trying to accomplish fully so just a bit more information and a visual will hopefully clear things up.

    From there we’ll see if its something we can help with and if not point you to where you can get additional help with customization beyond what we can do through support.

    Cheers!
    Devin

    December 4, 2013 at 6:02 am #195972
    vchemko
    This reply has been marked as private.
    December 4, 2013 at 8:09 pm #196339
    Devin

    That looks like what you have now, you just need to add a line break at the end of your last sentence to prevent it from overflowing under the image.

    Alternatively you could use a LayerSlider section for that header area and position the items with that instead.

    December 5, 2013 at 2:54 am #196468
    vchemko

    Thanks for your help, Devin! My developer seemed to figure it out at around the same time that you were looking, it seems.

    December 5, 2013 at 4:33 am #196478
    Devin

    Glad you were able to get it sorted out :)

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘DeveloperID – Increasing Max-Width and Margin of Main Image’ is closed to new replies.