Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 12, 2020 at 7:08 pm #1183974
    jayvee1982

    Hi,

    I am trying to achieve something like THIS
    but I cant get the grid rows to overlap. The page I am trying to achieve this on is:
    HERE

    I am super grateful for any help anyone can give me.

    Thanks

    • This topic was modified 4 years, 9 months ago by jayvee1982.
    February 13, 2020 at 8:44 pm #1184297
    Victoria

    Hey jayvee1982,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 768px) {
  #top .avia-builder-el-11 .av_textblock_section,
  #top .avia-builder-el-4 .av_textblock_section  img {
    margin-top: -95px;
    z-index: 99;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 14, 2020 at 9:17 am #1184432
    jayvee1982

    Hi Victoria and thanks for your reply. The snippet provided by you works great BUT this makes the change apply to all rows of its type, correct? Is there a way to add an extra class so I can pick and choose when to have this effect?

    February 14, 2020 at 11:18 am #1184458
    jayvee1982

    Oh, and can you tell me how to deactivate the enfold theme caching? Its annoying during dev….thanks

    February 15, 2020 at 6:08 pm #1184775
    Victoria

    Hi jayvee1982,

    No, the css will only apply the elements that have the class .avia-builder-el-11 and the text section in it. What caching are you referring to? You can go to Theme options > Performance tab and disable merging of css and JavaScript.

    Best regards,
    Victoria

    February 18, 2020 at 6:32 pm #1185765
    jayvee1982

    Hi Victoria,

    thats for clarifying on that last point. I have managed to use and adapt the code snippet you gave me but it isn’t really acting as hoped. Please check HERE to see what I have achieved. The issue should be clea I think -> The first two images seem fine but the third and fourth show some issues….

    Looking forward to your continued help, which I appreciate greatly.

    February 22, 2020 at 7:33 pm #1187006
    Mike

    Hi,
    Sorry for the late reply, I have looked at your grid row overlaps but I don’t see the issue with the 3er & 4th images.
    Here is what I see:
    2020-02-22-123207
    Is this what you are also seeing?

    Best regards,
    Mike

    March 3, 2020 at 1:28 pm #1189714
    jayvee1982

    Hi MIke,

    thanks for the reply. The issue described above had been solved by myself whilst waiting for a reply. However, now I am facing new issues that have arisen since, so I’d be super grateful for help with this. Please check HERE to see what my home page looks like. I am happy with this as is…

    Now I am trying to also overlap other elements on a different page -> THIS page. The issue I am having is that some of the elements have the same selectors and now I cant freely place the elements as I want without changing some of the elements on the home page. Can you tell me how to make the CSS in my quick CSS page specific? That way I can could use elements multiple times and have them placed differently im my layout at the same time….

    this is an example of what I am using to change the position of an element:

    @media only screen and (min-width: 768px){
    #top .avia-builder-el-8 .av_textblock_section,
    #top .avia-builder-el-11 .av_textblock_section img {
    position:relative;

    margin-right: -2.5vw;
    z-index: 2;
    }
    }

    .avia-builder-el-11 might also be used on another page though and I dont want the same rules to apply…

    I hope I am explaining it okay…
    I look forward to your help.

    March 4, 2020 at 12:41 pm #1190025
    jayvee1982

    Ok, Update:

    So I’ve figured out how to make the css page specific. This issue I am still facing is on THIS page. I am trying to layer the right image over the left box. It should all stay aligned as is…the image should simply ‘Slide’ across to the left…

    Thanks

    March 5, 2020 at 6:36 pm #1190548
    Victoria

    Hi jayvee1982,

    https://share.getcloudapp.com/Qwu79Ly5 I see the image overlaying. Did you manage to get it working or do you need more help?

    Best regards,
    Victoria

    March 10, 2020 at 9:48 pm #1192020
    jayvee1982

    Hi Victoria,

    sadly I still require help on another issue – sorry for being such a pest. Please check THIS page. Scroll to the bottom to see what I’m stuck on. How do I position the map the same as the images? I would also like it in the same dimensions….

    thanks heaps in advance.

    March 12, 2020 at 11:13 am #1192545
    Mike

    Hi,
    To overlap the map over the “ZENTRALE LAGE” column, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    
#top.page-id-996 #eightypercent .av_gmaps_sc_main_wrap.av_gmaps_main_wrap  {
    position: relative;
    margin-top: 4px;
    margin-right: -2.5vw;
    z-index: 8;
    border: 15px solid #ffffff;
}
#top.page-id-996 #eightypercent > div.flex_cell.no_margin.av_one_half.avia-builder-el-44.el_after_av_cell_one_half.avia-builder-el-last {
	height: 490px !important; 
}
#top.page-id-996 #eightypercent #av_gmap_0 {
	height: 420px !important; 
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    March 12, 2020 at 11:46 am #1192554
    jayvee1982

    Hi Mike, that worked just fine, thanks for the help! Can you think of a way to make sure the map is always the same height as the images? Maybe calc() depending on row height above or something? Thanks for your continued help!

    March 13, 2020 at 7:32 pm #1192942
    Victoria

    Hi jayvee1982,

    This will require additional custom JavaScript and this kind of customization is out of the scope that we provide here.

    If you need further assistance please let us know.
    Best regards,
    Victoria

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