Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #223517

    Hi, I have had a request for simple layout which doesn’t seem possible with the Avia builder:

    Full width/ full height (like fullscreen slider) page with 3 columns containing 1 full height image each.

    I’ve tried all the avia layout, content and media options but had no success.

    Thanks in advance
    Steven

    #223829

    Hi bleepstudio!

    Edit the page then look for Page Attributes > Template > choose the Blank – no footer, no header template. Add a color section then add “awesome-section” on For Developers: Section ID. Place 3 1/3 columns inside the color section and an Image element for each. Add this on Quick CSS:

    #awesome-section {
    width:100%; height:100%; position:fixed; top: 0;
    }
    
    #awesome-section .container, #awesome-section .avia_image {
    height: 100%;
    }

    Cheers!
    Ismael

    #227308
    This reply has been marked as private.
    #227643

    Hi!

    You don’t have the container named correctly. It should be the same ID as what the css is. In this case, the css has awesome-section but you have awesome_section. So the css doesn’t actually effect your layout at all.

    The issue however is that I don’t think your layout idea will work without quite a bit more custom css. Anything you add that isn’t inside a fullwidth element is going to be inside of a container so it wont be fullwidth. The images inside of them will only stretch to fit 100% height and also not scale. You would need to have them set as background images and use the css3 background: cover or something like it to get the content to fit and continue to scale.

    I would recommend a freelance developer from somewhere like Microlancer or Codeable to create the custom layout for you if its a must-have feature.

    Regards,
    Devin

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