December 3, 2013 at 9:43 am #195701
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:
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:
<!– 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; “>
<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” itemscope=”itemscope”>
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.
December 4, 2013 at 12:09 am #195918
- This topic was modified 3 years, 5 months ago by 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.
DevinDecember 4, 2013 at 6:02 am #195972December 4, 2013 at 8:09 pm #196339
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
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
The topic ‘DeveloperID – Increasing Max-Width and Margin of Main Image’ is closed to new replies.