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
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
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